Cara Membuat Mouse Hover Effect Pada Gambar Di Blog

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 ( dikutip : O-Om )

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 Jelaz )

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 Jelaz 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 kalo browser modern seperti MOzilla Firefox n dll pasti bisa

Nahh.. ini ada trick lagi, seanfainya kita tiap posting harus nempelin kode tersebut satu persatu pastilah menyita waktu kan ?? sekarang Bagimana kalo kita ingin semua gambar di posting anda ingin seperti keadaan diatas?

Ikuti langkah-langkah berikut :

1. Login ke blogger sobat

2. Pilih Rancangan (tata letak)

3. Klik Edit HTML

4. Cari kode : ]]></b:skin>

5. Lalu Simpan kode dibawah, tepat diatas 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}

6. Kalau sudah Simpan Template, dan lihat hasilnya.


semoga bermanfaat :)

Anda baru saja membaca artikel yang berkategori Tutorial Blog dengan judul Cara Membuat Mouse Hover Effect Pada Gambar Di Blog. Anda bisa bookmark halaman ini dengan URL http://riezcyber4rt.blogspot.com/2012/03/cara-membuat-mouse-hover-effect-pada.html. Terima kasih!

Ditulis oleh: Riez Cyber4rt - Jumat, 16 Maret 2012