Cara Membuat Hover Image

Hover image merupakan sebuah pembesaran pada gambar. Efek ini cukup menarik dan akan tambah menarik ketika anda menambahkan efek lainnya, seperti efek bayangan dan akan terlihat lebih atraktif jika anda menggunakan browser firefox 4.0 beta 9. Sebelumnya saya juga pernah memposting cara membuat efek zoom pada gambar menggunakan expando effect. Selain itu saya juga telah memposting cara membuat efek zoom pada gambar dengan menggunakan jquery image magnify v1.1. Silahkan anda baca dan bandingkan dengan materi posting kali ini. Ok gan gak usah banyak basa basi, langsung aja kita kupas bagaimana cara membuatnya. Ikuti langkah berikut.

Log in ke blog anda
Klik Rancangan
Klik Edit HTML
Masukkan kode CSS berikut di atas kode ]]></b:skin>

.hovergallery img{
-webkit-transform:scale(0.8);
-moz-transform:scale(0.8);
-o-transform:scale(0.8);
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
opacity: 0.7;
margin: 0 10px 5px 0;
}

.hovergallery img:hover{
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
box-shadow:0px 0px 30px gray;
-webkit-box-shadow:0px 0px 30px gray;
-moz-box-shadow:0px 0px 30px gray;
opacity: 1;
}

Simpan Template
Sekarang Masuk ke halaman posting dan masukkan kode di bawah ini pada gambar yang ingin anda berikan efek hovernya. Nih kodenya gan....yyyuuuhhhhuuuuuuuu

<div class="hovergallery">
<img src="alamat gambar anda di sini" />
<img src="alamat gambar anda di sini" />
<img src="alamat gambar anda di sini" />
<img src="alamat gambar anda di sini" />
</div>

Anda bisa menambahkan gambar lagi dengan menambahkan kode <img src="alamat gambar anda di sini" />
sebelum kode </div>. Sekarang terbitkan posting anda dan lihat hasilnya. Selamat mencoba dan sukses selalu.

"keep spirits and do the best"