Efek Hover Image Gallery

Image Gallery Hover Effect atau Efek Hover Image Gallery merupakan efek pada sebuah gambar dimana ketika gambar tersebut di-mouseover maka gambar akan melayang dan mendekat ke pengguna. Hampir sama dengan efek image bubble pada postingan TB sebelumnya, namun dengan tambahan efek floating. Efek ini memungkinkan gambar akan terlihat seperti melayang di atas halaman. Berikut demonya:

Atau bisa juga dilihat di demo efek image hover



Sebelumnya Tutorial Blog telah mem-posting beberapa tutorial mengenai efek untuk image yaitu, efek image opacity dan efek image bubble yang dibuat menggunakan kode CSS3. Nah untuk postingan kali ini TB akan memberikan tutorial mengenai efek hover image gallery dan juga masih menggunakan kode CSS3. TB harap Temen-temen tidak bosan dengan tutorial efek image ini, ya  ^_^

Kode CSS

Letakkan kode CSS berikut sebelum  ]]></b:skin> lalu SAVE.

<style type="text/css">
/*URL: http://www.tutorial-blog.co.cc */

.hovergallery img{
-webkit-transform:scale(0.8); /*Webkit: Scale down image to 0.8x original size*/
-moz-transform:scale(0.8); /*Mozilla scale version*/
-o-transform:scale(0.8); /*Opera scale version*/
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla duration version*/
-o-transition-duration: 0.5s; /*Opera duration version*/
opacity: 0.7; /*initial opacity of images*/
margin: 0 10px 5px 0; /*margin between images*/
}

.hovergallery img:hover{
-webkit-transform:scale(1.1); /*Webkit: Scale up image to 1.2x original size*/
-moz-transform:scale(1.1); /*Mozilla scale version*/
-o-transform:scale(1.1); /*Opera scale version*/
box-shadow:0px 0px 30px gray; /*CSS3 shadow: 30px blurred shadow all around image*/
-webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/
-moz-box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/
opacity: 1;
}

</style>

Temen-temen bisa mengubah skala image sesuai keinginan dengan mengganti angka dalam kurung (1.1) atau bisa juga mengubah settingan shadow sesuai keinginan.

Kode HTML
Temen-temen tinggal menambahkan kode berikut ini di postingan atau di mana pun sesuai keinginan Temen-temen:

<div class="hovergallery">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0MzmqbBE5qcvHIgXhHUp2T82NzytlfbZZ4rJ9JSaPmNlUn_rY1qzOgcNo4Og7iWU3JZ_peWbWN7Bc8VJ1AaNgPjNslcRx9M3z5_Dku9LAIXhsqI9S3G6A5k9IjaPLgeQpYX7oODArlW0/s1600/menjadi+blogger+yang+baik.jpg" />

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVOknJiYLd6vrnKOc-g_lsa-iuojdffBh7z3iNsCuArF9JymJc9s2IcR2x5pQNrSaIdxL9dO_gh-BYZcwMkvi0pOAyfZzE0E3tY_qHTDrp_hbLOu-zMdvmHxRxMhVAkAfsvK09YOV13lk/s1600/blogger.jpg" />

</div>

Tidak harus selalu memakai <div>, jika Temen-temen ingin lebih mudah dalam menerapkan efek ini pada gambar di postingan maka setelah Temen-temen mengupload sebuah gambar (ketika posting), tambahkan kode class="hovergallery" pada tag <a>. Haduu bingung ya!?
Misal:
Kode image awal:

<a href="http://1.bp.blogspot.com/.........."><img src="http://1.bp.blogspot.com/.../menjadi+blogger+yang+baik.jpg" /></a>

Nah, terus tinggal ditambahkan deh class="hovergallery" menjadi:

<a class="hovergallery" href="http://1.bp.blogspot.com/..jpg"><img src="http://1.bp.blogspot.com/.../menjadi+blogger+yang+baik.jpg" /></a>

Selesai sudah