Code nya saya tulis Dibawah ini saya bagi antara Code Css dan Code Html
Ini Code Css nya
<style>
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
.desc {
padding: 15px;
text-align: center;
}
</style>
Ini didalam Tag Body
<h2>Dropdown Image</h2>
<p> </p>
<div class="dropdown">
<img src="Url Gambar Sobat" alt="keterangan Gambar" width="100" height="50">
<div class="dropdown-content">
<img src="Url Gambar Sobat" alt="keterangan gambar" width="300" height="200">
<div class="desc">Membuat Background</div>
</div>
</div>
Ini kalau Mau di tambah Tag Link <a href
<div class="dropdown">
<a href="Url">
<img src="Url image" alt="Keterangan image" width="100" height="50"></a>
<div class="dropdown-content">
<a href="Url">
<img src="Url image" alt="keterangan image" width="300" height="200"></a>
<div class="desc">Membuat Background</div>
</div>
</div>
Jadi Cara nulis nya Code html nya
<html>
<head>
<style>
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
.desc {
padding: 15px;
text-align: center;
}
</style>
</head>
<body>
<div class="dropdown">
<a href="Url">
<img src="Url image" alt="Keterangan image" width="100" height="50"></a>
<div class="dropdown-content">
<a href="Url">
<img src="Url image" alt="keterangan image" width="300" height="200"></a>
<div class="desc">keterangan conten</div>
</div>
</div>
</body>
<html>
ket
url image =tulis alamat image sobat
keterangan image =tulis penjelasan singkat image sobat
keterangan conten =tulis keterangan yag ada di gambar sobat ini ada di drpdown image sobat dibawah nya
ini Code untuk belajar j y sobat jika ada kesalahan Mohon Maaf maklum saya juga masih pemula dalam Css..nah sobat buat latihan j di perbagus lagi y
Semoga sukses
Alhamdulillah Catatan Sederhana Cara Membuat Dropdown Image Link Telah selesai Mohon maaf jika ada kesalahan Wasalamu'alaikum warohmatulloh wabarokaatuh
No comments:
Post a Comment