membuat image hover

membuat image hover seperti ini (Arahkan mouse ke gambar) :



Caranya :
Masuk ke Rancangan > Edit HTML > centang Expand Template Widget
copy kode ini :

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

pastekan diatas kode :

]]></b:skin>

klik simpan template...

untuk menerapkkan kode CSS diatas. Untuk menerapkkannya ganti kode HTML image Anda dengan kode HTML dibawah ini :

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

selamat berkreasi... :)