Cara Membuat Mouseover Pada Gambar Posting (Mode Transparant)

Met pagi semua, mungkin trick ini sudah banyak yang tahu, yaitu cara membuat gambar pada postingan berefek transparant/mouseover. kiranya seperti itu, kebetulan saya lagi nyari-nyari ini trik, ehh akhirnya dapet juga. sekalian deh saya share disni juga.
Kembali ke topik.. Apa itu mouseover?
Mouseover adalah sebuah keadaan dimana mouse berada tepat di wilayah objeck. Nah biar lebih jelas mari langsung saja lihat gambarnya dan praktekin.

A. Cara yang pertama
Untuk contoh yang pertama kita akan membuat keadaan, dalam keadaan normal, maka gambarnya biasa, dan jika mouse tepat berada di wilayah gambar, maka gambar itu akan transparan. perhatikan gambar dibawah ini :



Kode yang saya gunakan :

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

B. Cara yang Kedua
Cara kedua, kita akan membalikan keadaan, yaitu : dalam keadaan normal, gambar akan transparan, sedangkan jika disorot mouse, gambar akan biasa. lihat gambar di bawah ini :




Kode yang saya gunakan :

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

Keterangan :
Untuk kode yang bercetak warna biru, gantilah dengan alamat url gambar sobat.


Nahh.. ini ada trick lagi, seandainya 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.


Wuookee.. selamat mencoba semoga sukses.