Cara Menampilkan Gambar / Image Transparan

Mungkin anda pernah melihat suatu gambar / image / foto dalam blog ketika cursor mouse digeser ke arah gambar tersebut, gambar / image tersebut menjadi redup atau transparan (mouseover effect). Begitu pula sebaliknya, awalnya gambar / image redup dan ketika cursor diarahkan ke gambar tersebut menjadi nyata / terang.

Cara kerja efek gambar transparan tidaklah 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.

Contoh mouseover effect dari redup ke lebih terang (diset langsung dalam gambar)

<img src="Url lokasi 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 mouseover effect dari terang ke redup (diset langsung dalam gambar)

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

Mungkin menyusahkan jika setiap image harus diset satu-persatu nilainya propertinya, nah agar setiap postingan anda langsung memilik efek ini secara otomatis, bisa langsung menambahkan kode CSS ini dalam postingan:

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

Firefox biasanya menggunakan property opacity:x untuk melakukan tranparancy, berbeda dengan IE yang menggunakan filter:alpha(opacity=x).  Pada Firefox opacity:x nilai pada x dapat diisi dengan value antar 0.0 -1.0 sedangkan pada IE filter:alpha(opacity=x) nilai x antara 0-100.

• o-om

Tweet

Related Post: