Hallo teman-teman, kali ini kita akan belajar membuat hover menu makanan dengan CSS3. Pada tutorial ini kalian akan mempelajari bagaimana membuat hover, dengan contoh kasusnya seperti memilih makanan di website. Agar terlihat menarik tentunya akan diberikan efek transisi pada saat memilih menu makananya. Menu makanannya sendiri dengan menggunakan image. Jadi pada saat cursor mengarahkan pada gambar yang ingin dipilih akan muncul harganya. Oke langsung saja kita mulai prakteknya, kalian bisa buat file htmlnya dan ikuti contoh code dibawah ini.
makanan.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
<html> <head> <style> .container{ width: 1000px; margin:auto; } .item{ float: left; margin-right: 10px; width: 200px; height: 150px; padding: 10px 10px 0 10px; background: #ccc; position: relative; overflow: hidden; } .deskripsi{ text-align: center; background: gold; width: 200px; height: 50px; display: block; position: absolute; top:160px; transition:all 0.2s linear; } .item:hover .deskripsi{ top:110px; transition:all 0.2s linear; } </style> </head> <body> <div class="container"> <div class="item"> <a href=""><img src="nasipadang.jpg" alt="" width="200"></a> <div class="deskripsi"> <p>Harga Rp.20.000</p> </div> </div> <div class="item"> <a href=""><img src="nasipadang.jpg" alt="" width="200"></a> <div class="deskripsi"> <p>Harga Rp.20.000</p> </div> </div> <div class="item"> <a href=""><img src="nasipadang.jpg" alt="" width="200"></a> <div class="deskripsi"> <p>Harga Rp.20.000</p> </div> </div> <div class="item"> <a href=""><img src="nasipadang.jpg" alt="" width="200"></a> <div class="deskripsi"> <p>Harga Rp.20.000</p> </div> </div> </div> </body> </html> |
Setelah itu disave. Dan lihat hasilnya pada browser kalian. Jika berhasil maka akan terlihat seperti ini.
Hal itu terjadi karena menggunakan efek hover, jadi pada saat mouse mengarah pada gambar, maka deskripsi yang berwarna kuning itu akan muncul dari bawah keatas. Saat tidak dipilih, deskripsi tersebut sebenarnya pindah kebawah gambar, namun pada kotak abu-abu tersebut terdapat nilai overflow hidden. Sehingga deskripsi tersebut terlihat menghilang. Dan untuk gambar kalian bisa ganti sesuai keinginan kalian.
Mudah bukan ?
Sekian pembahasan mengenai membuat hover menu makanan dengan CSS3. Semoga bermanfaat.