Dropdown Image
Assalamu'alaikum warohmatulloh wabarokaatuh sobat sudah siap kita belajar lagi, masih ingat waktu kemaren saya sudah kasiih ebook tentang Css didalam ebook tersebut banyak sekali code css yang harus kita praktekan kenapa harus di praktekan ,dengan banyak praktek kita bisa mengetahui code2 Css tersebut Fungsi nya, dan lagi kalu saya lebih suka praktek daraipada kebanyakan teori,,,ok langsung saja...sekarang kita praktek membuat DropDown image
<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>
<h2>Dropdown Image</h2>
<p>Arahkan Cursor ke gambar Untuk membuka .</p>
<div class="dropdown">
<img src="url image" alt="keterangan image" width="100" height="50"><div class="dropdown-content">
<img src="url image" alt="keterangan image" width="300" height="200">
<div class="desc">isi singkat tentang image</div>
</div>
</div>
</body>
</html>
pertama sobat harus punya 2 image
1 ukuran width="100" height="50"
2 ukuran width="300" height="200"
kedua
ALAMAT/url image tulis
ketiga isi Alt imge dan desc image
Alt itu keterangan image dan
desc image itu isi singkat tentang image
Dah itu aja coba sobat praktekan SELAMAT BELAJAR
Arahkan Cursor ke gambar Untuk membuka .
isi singkat image
refrensi
Referensi
http://www.w3schools.com/
Alhamdulillah Catatan sederhana Membuat Dropdown image telah selesai Mohon maaf jika ada kesalahan Wasalamu'alaikum awarohmatulloh wabarokaatuh
No comments:
Post a Comment