Hallo teman teman balik lagi dengan saya Ismet Maulana, kali ini saya ingin berbagi pengetahuan tentang Bagaimana Cara Membuat Image Hover Overlay Effect Menggunakan HTML5 Dan CSS3, yang dimaksud image hover overlay ialah tampilan gambar ketika kursor mengarah ke bagian gambar maka akan tampil sebuah deskripsi
tentang gambar tersebut atau bisa juga dengan background saja atau yang lainnya, cara nya sangat mudah teman teman bisa salinkan scriptnya dibawah sini yah .
<div class="semua">
<img src="http://www.artsiowacity.org/Images/homePage/galleryShot1_web.jpg">
<div class="info">
<div class="over">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</p>
</div>
</div>
</div>
<div class="semua">
<img src="http://www.artsiowacity.org/Images/homePage/galleryShot1_web.jpg">
<div class="info">
<div class="over">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</p>
</div>
</div>
</div>
<div class="semua">
<img src="http://www.artsiowacity.org/Images/homePage/galleryShot1_web.jpg">
<div class="info">
<div class="over">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</p>
</div>
</div>
</div>
berikut cssnya :
<style>
body {background: lightblue}
.info {height: 245px; width: 380px; margin-top: 30px; margin-left:10px;background: black; opacity: 0.6; color: #fff; font-weight: normal; transition: transform 3s; position: relative;}
.over {position: absolute; margin-top:100px; text-align: center; display: none;}
.semua {padding-top: 20px; overflow: hidden; float: left; margin-right: 20px; height: 285px;}
.semua img {border: 10px solid #fff; width: 400px; height: 100%}
.semua:hover .info {transform: translateY(-285px);}
.semua:hover .over {display: block;}
</style>
Jika sudah disalin semua teman teman bisa save dan jalankan di browser lalu arah kan kursor pada tampilan image, maka akan ada effect pada gambar tersebut dengan sebuah deskripsi didalamnya, oke cukup mudah yah sampai disini artikel tentang Bagaimana Cara Membuat Image Hover Overlay Effect Menggunakan HTML5 Dan CSS3, sampai bertemu diartikel selanjutnya dan sampai jumpa.
untuk melihat klik DEMO
#KeepLearn
#IsmetMA