Membuat Image / Gambar Terlihat Blur ( Tersamar ) Ketika Disorot Mouse

Nah kali ini aku akan menulis cara membuatnya, memang banyak sekali trik dan tips blog yang berguna untuk menarik para pengunjung blog agar berlama lama di blog.

Untuk Caranya Sbb :
1. Login ke Blogger
2. Masuk ke TATA LETAK --> EDIT HTML
3. Anda cari kode ]]></b:skin>
4. Letakkan kode di bawah ini di atas ]]></b:skin> :

     .linkopacity img {filter:alpha(opacity=100); -moz-opacity:1.0; opacity:1.0; border:0;}

     .linkopacity:hover img {filter:alpha(opacity=30); -moz-opacity:0.3; opacity:0.3;border:0;}

Nah jika rekan2 ingin menerapkan Effect ini, tambahkan kode berikut ini : <a href="#nogo" class="linkopacity"> di depan kode image, yang akan menjadi seperti ini :
Contohnya:
<a href="#nogo" class="linkopacity"><img src="http://i859.photobucket.com/albums/ab160/seby_antoe/1komisisuper125x125px5dtk.gif"></a>

Untuk melihat hasilnya bisa Anda lihat di bawah ini, coba arahkan mouse ke image dan klik :

Selamat mencoba.....

Related Post: