Ok sobat, berikut ini admin akan berbagi mengenai cara membuat efek hover zoom dan deskripsi pada gambar di blog.

Yah efek hover adalah efek yang muncul ketika kursor mouse pointer diarahkan atau ada diatas gambar di blog.

Nah ketika pointer mouse ada diatas gambar maka ada efek zoomnya dan deskripsi yang menerangkan gambar tersebut. Yah untuk lebih jelasnya cek saja demonya sob.

Efek Hover Zoom + Deskripsi Pada Gambar di Blogger


Cara Membuat Efek Hover Zoom + Deskripsi Pada Gambar
Giban.Net


Berikut ini adalah kode-kodenya.

CSS


.gibanbox{position:relative;width:80%;height:auto;z-index:2;margin:0 auto;padding:0}
.gibanbox img{position:relative;z-index:1;transition:all .5s ease-in-out;width:auto;max-width:100%;height:auto}
.gibanbox img:hover{transform: scale(1.5) ;-webkit-filter:brightness(0.55);}
.gibanbox div.imgdescription{position:absolute;width:80%;z-index:2;bottom:-100px;left:50%;margin-left:-42%;padding:2%;text-align:center;background:rgba(0,0,0,0.8);color:white;border-radius:8px;opacity:0;transition:all .5s ease .5s;font-size:100%}
.gibanbox div.imgdescription a{color:white;text-decoration:underline}
.gibanbox:hover div.imgdescription{bottom:15px;opacity:.8}
@media screen and (max-width:480px){
    .gibanbox{width:100%;}
}

HTML


<div class="gibanbox">
<img alt="thumbnail" height="300" src="http://4.bp.blogspot.com/-wFt-q2gHZ5Q/VCyqvCFVIZI/AAAAAAAAd30/SnqPim5wz9k/s1600/windows-10.png" width="600" title="Capable of seating 50,000 spectators"/>
<div class="imgdescription">
Ini adalah contoh deskripsi gambar dengan hover, <a href="https://www.giban.net/" title="Contoh Link">Giban.Net</a> ini adalah contoh link dalam deskripsi gambar.
</div>
</div>

Kode - kode di atas silahkan kamu edit sesuai kebutuhannmu. Ok sampai disini dulu sobat, selamat mencoba.
1 Komentar untuk "Cara Membuat Efek Hover Zoom + Deskripsi Pada Gambar"