Membuat Mouseover Effect opacity

cara membuat MouseOver Effect di blog, Apa itu Mouseover Effect, ya intinya effect yang akan keluar jika kita sorot gambar dengan mouse.

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.

Atau biar lebih jelaz coba aja lihat contoh gambar dibawah ini, hasil dari Effect MouseOver opacity pictures (tunjuk Gambar dengan mouse agar terlihat effect opacity nya) :

1. Mouse OverEffect Opacity imageI ( Opacity dari Buram ke Jelas )

Untuk membuat Effect Opacity gambar diatas copy script dibawah ini :

<img src="Masukkan URL Gamabar Anda Disini" style="opacity:0.2;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" />
2. Mouse OverEffect Opacity image II ( Opacity na dari Jelas ke Buram )

Untuk membuat Effect Opacity gambar diatas copy script dibawah ini :

<img src="Masukkan URL Gamabar Anda Disini" 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"/>


tetapi ini mungkin tidak akan support sama semua browser, tapi kalau browser modern seperti Mozilla Firefox sudah  mendukung.

POSTING BERKAITAN

akur:
Tips Trick | Blog