Tips Triks CSS | Bikin Gambar Redup Menjadi Terang Saat Kursor Diarahkan ke Gambar Dengan CSS

Ini salah satu hasil kreasi [jika tidak mau dibilang duplikasi...hehe] dari belajar CSS online seperti pada post sebelumnya. Terlihat cukup keren jika ada gambar di blog kita ber-efek animasi seperti gambar redup menjadi terang saat kursor melewati gambar tersebut. Dalam bahasa Inggris tehnik ini disebut dengan "Image Transparency - Mouseover Effect".

Adapun kelebihan lainnya, dengan menggunakan tehnik CSS ini, sama sekali tidak membuat loading blog kita menjadi lambat karena ada efek animasi di dalamnya. Sangat berbeda sekali jika kita menggunakan tehnik serupa menggunakan JQuery seperti pada animasi popular post.

Berikut kode CSS yang membentuk gambar redup menjadi terang saat kursor diarahkan ke gambar.

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

Dan ini adalah bentuk tampilan gambar dari hasil kode diatas. Coba arahkan kursor ke gambar ini untuk melihat hasilnya

Selamat berkreasi dan mencoba...happy blogging!

Posted in: Belajar CSS Online,Bikin Gambar redup jadi terang,CSS,Edukasi,Tips triks