Membuat Mouseover Effect Pada Gambar di Blog

Bismillah, salam ukhuwah untuk sobat semua, nah untuk kali ini saya mo kasih sedikit pengalaman saya yaitu cara membuat gambar terang dan redup ketika kursor diarahkan di gambar tersebut, cara ini saya dapatkan dari O-om nah langsung aja ke TKP

Cara kerja efek gambar transparan diatas tidak begitu sulit, yang kita perlukan hanya memanfaatkan properti CSS Image Opacity. Namun sebelumnya perlu juga diketahui property CSS opacity sebenarnya tidak termasuk dalam standar CSS, dimana property ini hanya bekerja dengan baik pada beberapa web browser modern saja.

Contoh mouseover effect dari redup ke lebih terang (diset langsung dalam gambar) seperti gambar di bawah ini, coba arahkan kursor ke gambar,langsung aja gak pake' lama :

Giman kelihatan toh giginya..he...he...bagus toh!!!
Mo tau caranya gini, silahkan sobat copas kode dibawah ini setiap sobat menginginkan gambar redup menjadi terang di setiap postingan :

<img src="Silahkan sobat isi dengan alamat URL gambar" 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" />

Contoh mouseover effect dari terang ke redup (diset langsung dalam gambar)

Giman jadi gak klihatan toh giginya...xixixixi...
Kodenya seperti ini :

<img src="Silahkan sobat isi dengan alamat URL gambar" border="1" style="opacity:1;filter:alpha(opacity=100)"
onmouseover="this.style.opacity=0.4;this.filters.alpha.opacity=40"
onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100"/>

Jika sobat menginginkan setiap postingan langsung memiliki efeks copas kode dibawah ini di CSS dan letak kan diatas ]]></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}

Gimana Gampang Bukan SELAMAT MENCOBA SEMOGA SOBAT BERHASIL