CSS Gambar Dropdown

0
145

Kali ini saya menulis tutorial membuat dropdown dengan gambar/image html dan css. Sebenarnya sama seperti tutorial tutorial sebelumnya, CSS Dasar Dropdown dan CSS Menu Dropdown. Hanya kali ini menggunakan gambar bukan text lagi. Oke, langsung saja ke tutorialnya.

*Siapkan gambar anda terlebih dahulu

Step 1

Ketikkan sorce code dibawah ini lalu simpan dengan nama index.html.

<!DOCTYPE html>
<html>
<head>
	<title>Css Dropdown Gambar</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<h2>Css Dropdown Gambar</h2>
	<p>Arahkan mouse ke gambar dibawah ini.</p>
	<div class="dropdown">
		<img src="karya.png" style="width: 10%;">
		<div class="dropdown-content">
			<a href="#">
			<img src="karya.png" style="width: 100%;">
			<div>
				<div class="desc">
					<h2>Flat</h2>
				</div>
			</div>
			</a>
		</div>
	</div>
</body>
</html>

 

Step 2

Setelah membuat file index.html, lalu kita membuat folder baru, yaitu folder “css”, lalu ketik source code dibawah ini dan simpan file dengan nama style.css lalu simpan pada folder yang kita buat tadi css.

.dropdown img {
  position: relative;
  display: inline-block;
}
.dropdown-content {
  width: 30%;
  position: absolute;
  padding: 0;
  margin: 0;
  display: none;
  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.3);
}
.dropdown a {
  text-decoration: none;
}
.dropdown-content .desc h2 {
  text-align: center;
  padding: 12px 0 12px 0s;
  font-family: arial;
  color: #333;
  margin: 0;
}
.dropdown:hover .dropdown-content {
  display: block;
}

 

Jika sudah selesai buka file index.html, maka tampilannya nanti akan seperti dibawah ini.

Sekian tutorial kali ini semoga bisa bermanfaat bagi anda. Jika anda suka dengan tutorial kami maka silahkan share ke teman-teman atau siapapun itu, karena berbagi itu indah.

Terima Kasih telah membaca.

***PIU***

 

LEAVE A REPLY

Please enter your comment!
Please enter your name here