Membuat Efek Hover Pada Gambar diblog

Sahabat blogger, pada postingan yang lalu bang dadan telah membuat artikel tentang Cara Membuat Efek Image Zoom di Blog, nah untuk menyambung artikel sebelumnya kali ini bang dadan akan membahas Cara Membuat Efek Hover Pada Gambar di Blog.

Image hover merupakan sebuah efek gambar redup atau terang, maksudnya bila kita mengarahkan kursor pada gambar di postingan secara otomatis gambar yang redup akan menjadi terang, begitu juga sebaliknya, bila kita mengarahkan mouse pada gambar yang terang, otomatis akan menjadi redup. 

Bagaimana caranya bisa seperti itu?? Oke langsung saja bagi sobat yang ingin melihat DEMO-nya silahkan sobat arahkan kursor pada gambar di bawah ini.

Contoh 1

◉ Berikut Kodenya:

<img src="URL gambar" style="opacity:0.4;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" />

Contoh 2

◉ Berikut Kodenya:

<img src="URL gambar" 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"/>

Silahkan ganti tulisan yang berwarna merah dengan URL Gambar sobat masing - masing.

Nah apabila sobat ingin membuat efek image hover pada semua gambar dipostingan blog secara otomatis, silahkan ikuti langkahnya dibawah ini. yang di tas adalah cara manual.

◉ Berikut cara penerapannya pada blog sobat:

• Login ke Akun Blog
• Rancangan Template Edit HTML *jangan lupa centang expand template widgate
• Cari kode ]]></b:skin>
• Copy dan pastekan kode dibawah ini tepat diatas ]]></b:skin>

◉ Berikut Kodenya:

.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}

• Selanjutnya simpan template

Nah, mungkin sekian dulu pembahasan kali ini tentang Cara Membuat Efek Hover Pada Gambar diblog. Semoga artikel ini bermanfaat buat sobat semua. Selamat mencoba..!!

Sekian dan terimakasih.

Anda sedang berada pada artikel tentang Membuat Efek Hover Pada Gambar diblog dengan url http://andrew-namikaze.blogspot.com/2013/04/membuat-efek-hover-pada-gambar-diblog_182.html,Boleh copy paste tapi sertakan Membuat Efek Hover Pada Gambar diblog sebagai sumbernya.