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.
2. Klik Rancangan > Edit HTML.
3. Beri tanda centang pada Expand Template Widget.
4. Cari kode ]]></b:skin>
5. Copy kode di bawah ini dan paste di atas kode ]]></b:skin>
<style type="text/css">
.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>
Sobat bisa mengubah skala image sesuai keinginan dengan mengganti angka dalam kurung (1.1) atau bisa juga mengubah settingan shadow sesuai keinginan.
6. Simpan Templates
7. Tambahkan kode class="hovergallery" pada gambar yang akan diberi Efek Hover.
Misalnya
<div class="hovergallery"><img style="float:left; margin:20px 10px 0 0;cursor:pointer; cursor:hand;width: 178px; height: 208px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjE-lKMWZeFkgY9PDIIy-zBroEG9CNIbPGy8KTY9UIecqI1SaVTDdNmOCmYO_6URRxDP0J8LsVtgHKIpIigZRMdU9OTmgE9zAimSKe4LMT-mMejTwnYAT0TlZN903UOrYkZebxO-zH3biE/s320/menjadi+blogger+yang+baik.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5612362727377772530" /></div>
Selamat Mencoba, "Good Luck"
Posting Komentar