Membuat Mouseover Effect Pada Gambar

By : Fajar Shinichy

On : 12:00

In : Tips N Tricks

0 comments

Membuat gambar lebih menarik, dengan ini setiap gambar atau foto yang kita akan tampilkan akan mempunyai efek juka mouse kita taruh di gambar tesebut. Gamabar tersebut akan menjadi redup atau sebaliknya, yaitu menjadi terang. Dan untuk membuat animasi mouseover effect itu tidaklah sulit. 

Seperti dikutip dari O-om Cara kerja efek gambar transparan diatas 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.

Cara membuat mouseover effect dari redup ke lebih terang.

<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" />

Cara membuat mouseover effect dari terang ke redup

<img border="1" onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseover="this.style.opacity=0.4;this.filters.alpha.opacity=40" src="URL Gambar" style="opacity: 1;" />

Dan mungkin akan sedikit repot jika harus menmabhkan kode css setiap kali ingin menampilkan effect pada gambar kita di postingan. Tapi ada jalan mudah untuk otomatis setiap gambar kita di postingan bereffect seperti diatasa, acaranya adalah menambahkan kode css berikut ini d atas ]]></b:skin>

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