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 animasiseperti 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" />
Coba dh berkreasi dgn code itu... OKe.....!!!
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" />
Coba dh berkreasi dgn code itu... OKe.....!!!
0 comments:
Posting Komentar