Buat (Efek Blur) MouseOver Pada Semua Gambar

Sekarang kita akam mempelajari efek blogger yang berguna untuk Menampilkan Gambar Transparan, Mouseover Effect. Apakah sahabat blogger mengetahui efek tersebut.

Cara kerja efek gambar transparan di bawah ini 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.

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



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



Mungkin agak ribet juga ya jika setiap image harus diset satu-persatu nilainya propertinya, nah agar setiap postingan rekan langsung memilik efek ini secara otomatis, bisa langsung menambahkan kode CSS ini:

*Note : Jika code ini tidak bisa di copy/paste , silahkan anda bisa download code disini

Berikut langkah - langkah project latihan kita kali ini.
1. Login ke Akun Blogger anda masing-masing
2. Klik Design atau Rancangan, kemudian pilih edit html
3. Centang Expand Widget Template (saya anjurkan download dahulu template anda)
4. Cari kode : ]]></b:skin>
5. Lalu Masukkan Salah satu Kode CSS dibawah ini, tepat diatas kode ]]></b:skin>


1. Contoh mouseover effect dari redup ke lebih terang 

.post img{opacity:0.5; filter:alpha(opacity=40); this.style.opacity=6}
.post img:hover{opacity:100; filter:alpha(opacity=40); this.style.opacity=1}

2. Contoh mouseover effect dari terang ke redup

.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. Save, lihat hasilnya,..

NB: Setahu saya Firefox biasanya menggunakan property opacity:x untuk melakukan tranparancy, berbeda dengan IE yang menggunakan filter:alpha(opacity=x).  Pada Firefox opacity:x nilai pada x dapat diisi dengan value antar 0.0 -1.0 sedangkan pada IE filter:alpha(opacity=x) nilai x antara 0-100.

Posts by Daniels'

Hi`i'm Daniels ,from Indramayu, i love to blogging, Desing Blogger template, Web Developing and Designing. I like to learn and share technical hacking/security tips with you, I love my friends.

Follow Me On Twitter Or Facebook !!

You might also like these article :

Attention Please!

Bantu kami memperbaiki blog ini. Hubungi saya jika Anda menemukan konten yang rusak/tidak terbaca. Silahkan beritahu kami dengan menulis pesan pada kotak komentar atau pada guestbook kami. Kami akan berusaha menanggapi dan memperbaiki konten tersebut secepatnya. Terima Kasih.

Contact me if you find content that is damaged or unreadable. Please let us know by writing a message in the comments box or on our guestbook. We will try to respond to and improve the content as soon as possible. Thank You.

Have a question ? Contact on : https://www.facebook.com/Mangga.Racing