Image Hover CSS3

Login ke Blogger.
Masukan ke Design >> Edit HTML.
Copy code CSS dibawah ini dan paste tepat di atas kode ]]></b:skin>:

a.pic .image2{display:none}
a.pic:hover .image1 {display:none}
a.pic:hover .image2 {display:inline}

Untuk menampilkan Image Hover diperlukan 2 buah image yang berbeda. Kemudian memanggil kode CSS tersebut dengan menambahkan class pada HTML image yang kita punya. Contohnya:

<a class="pic" href="LINK YANG DITUJU"><img class="image1" src="URL IMAGE ASLI"/> <img class="image2" src="URL IMAGE HOVER"/></a>

Demo:


Refferensi