Membuat Efek Gambar dengan Mouseover Effect

Cara membuat efek gambar dengan Mouseover Effect agar gambar lebih menarik. Mouseover Effect adalah efek yang membuat gambar tampak redup atau sebaliknya tampak terang, dengan cara ini gambar atau foto yang anda tampilkan akan mempunyai efek seperti yang kami sebutkan di awal.Gambar akan menjadi redup atau sebaliknya, menjadi terang, tergantung efek yang anda gunakan. Cara membuat animasi mouseover effect cukup mudah. Namun demikian memang kita perlu memanfaatkan properti CSS Image Opacity yang mungkin hanya akan bekerja dengan baik pada beberapa web browser modern saja karena tidak termasuk pada standar CSS.




Cara membuat Mouseover Effect secara otomatis:
Silahkan anda cari kode ]]></b:skin>
Masukkan kode css berikut ini di atas kode ]]></b:skin>

.post img{opacity:1;filter:alpha(opacity=1); this.style.opacity=6}

.post img:hover{opacity:.5;filter:alpha(opacity=100); this.style.opacity=1}



Cara membuat mouseover effect pada setiap postingan.

Dari redup ke lebih terang (masukkan pada halaman html)

<img src="URL gambar anda" style="opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />

Dari terang ke redup

<img border="1" onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseover="this.style.opacity=0.4;this.filters.alpha.opacity=40" src="URL Gambar anda" style="opacity: 1;" />

Demikian tips cara membuat mouseover effect pada postingan, selamat mencoba !