Cara membuat image hover

Image Hover adalah perubahan pada gambar apa bila cursor / mouse berada di atas gambar tersebut untuk mengetahui cara kerja nya klik

DEMO

dan berikut cara pembuatan image hover

1. pertama sobat harus login dulu ke www.blogger.com tentunya dengan ID sobat
2. masuk kerancangan >>Edit HTML >>Cari kode ]]></b:skin> untuk membantu pencarian gunakan Ctrl+F 
3. lalu masuk kan kode Css di bawah ini tepat di atas kode ]]></b:skin> berikut kode nya :
<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>
4. Save template

Nah untuk penempatan Di Postingan gunakan kode seperti di bawah ini :

<div class="hovergallery">
<img src="masuk kan url gambar disini" />
</div>

Perlu di perhatikan untuk teks yang berwarna HIJAU ganti dengan Url gambar yang sobat sukai oke selamat mencoba