Halo, ketemu lagi dengan saya :), Pada pertemuan sebelum nya kita membahas mengenai Efek Hover, Nah pada kesempatan kali ini masih mengenai Efek Hover tapi kali ini saya akan berbagi trik bagaimana caranya Membuat Efek Hover Pada Gambar Dengan CSS, Penasaran bagaimana cara membuatnya ? Yuk simak langkah-langkah nya berikut ini.
1.Silahkan siapkan dulu satu buah gambar apa saja, kalo sudah lanjutkan untuk mengetikan kode HTML berikut:
|
1 2 3 4 5 6 7 8 |
<ul class="demo-2 effect"> <li> <h2 class="zero">This is a title!</h2> <p class="zero">Lorem ipsum dolor sit amet.</p> </li> <li><img class="top" src="image3.jpg" alt=""/></li> </ul> </body> |
2. Kalo Sudah, lanjutkan lagi untuk kode CSS nya, Silahkan ketikan Kode berikut:
|
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 |
.demo-2 { position:relative; width:300px; height:200px; overflow:hidden; float:left; margin-right:20px; background-color:rgba(26,76,110,0.5) } .effect li { list-style:none; } .demo-2 p,.demo-2 h2 { color:#fff; padding:10px; left:-20px; top:20px; position:relative } .demo-2 p { font-family:'Lato'; font-size:12px; line-height:18px; margin:0 } .demo-2 h2 { font-size:20px; line-height:24px; margin:0; font-family:'Lato' } .effect img { position:absolute; left:0; bottom:0; cursor:pointer; margin:-12px 0; -webkit-transition:bottom .3s ease-in-out; -moz-transition:bottom .3s ease-in-out; -o-transition:bottom .3s ease-in-out; transition:bottom .3s ease-in-out } .effect img.top:hover { bottom:-96px; padding-top:100px } h2.zero,p.zero { margin:0; padding:0 } |
3. Kemudian disimpan, sekarang coba jalankan di browsernya masing-masing, dan lihat hasilnya.
Gimana, mudah sekali yah ? Kalian bisa memodifikasi nya lagi sesuai selera masing-masing.
Baiklah sampai disini artikel mengenai cara Membuat Efek Hover Pada Gambar Dengan CSS, Semoga bermanfaat, aminn.
Selamat Mencoba 🙂