Cara Membuat Efek Hover/Transparansi Pada Gambar dalam Postingan Blog

By. Dedi Yahya S

Pada kesempatan kali ini saya akan memberikan trik dan panduan tentang Cara Membuat Efek Hover/Transparansi Pada Gambar dalam Postingan Blogspot.

Fungsi dari Tutorial ini adalah jika cursor mouse menyorot / atau berada pada salah Satu gambar pada blog, maka gambar tersebut akan menyala / buram pada tampilan blog pada postingan. 

Coba arahkan kursor / mouse pada gambar maka akan terlihat buram.

Diatas adalah contohnya.

Cara Membuat Efek Hover/Transparansi Pada Gambar dalam Postingan Blogspot :

• Pilih gambar yang akan digunakan 
• Setelah itu upload ke internet
• Setelah di-upload, Anda akan mendapatkan URL gambar tersebut 
• URL gambar tersebut harus Anda sisipi dengan kode berikut ini :

onmouseover="this.style.opacity=0.4;this.filters.alpha.opacity=40"
onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100" style="opacity:1;filter:alpha(opacity=100)"

•  Berikut adalah contoh code untuk dipasang pada postingan, warna merah adalah URL gambar.

<img onmouseover="this.style.opacity=0.4;this.filters.alpha.opacity=40"
onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100" style="opacity:1;filter:alpha(opacity=100)" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIDbWCHMH-7W9AtSmewtSS7bHrXDrL-stG5PaN2aZ44YhJo8LxRfvwmD-LsdwdZaUrQjUgcnmhFChhcaDE0Lso6YG0WIAVcUCuBx9Sx-YuPN54hSQPLIoXJvrWIxrYVaooKRWl8CKga9D1/s400/home.png"/></a>

Demikian blogger tutorial mengenai Cara Membuat Efek Hover/Transparansi Pada Gambar dalam Postingan Blog.

Semoga bermanfaat dan semoga berhasil.

Terima Kasih ^_^