Menampilkan Gambar Transparan, Mouseover Effect

Ini maksudnya apa ya? ok, dari pada saya jelasin panjang lebar coba rekan
lihat dulu samplenya di
zoomtemplate.com, kalo sudah coba sekarang arahkan mouse ke gambar yang ada
dihalaman postingan..nah disitu rekan akan melihat efek dimana gambar yang
semula terang akan menjadi redup atau bisa juga sebaliknya dari redup menjadi
terang ketika dilewati mouse. Mungkin sudah cukup jelas maksudnya ya, langsung
aja ke bahasan selanjutnya :)

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.

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

onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" width="320" height="240"/>

 

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

onmouseover="this.style.opacity=0.4;this.filters.alpha.opacity=40"
onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100" width="320" height="240"/>

 

<img src="Url lokasi
simpan 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 agak ribet juga ya jika setiap image harus diset satu-persatu
nilainya propertinya, nah agar setiap postingan rekan
langsung memilik efek ini secara otomatis, bisa langsung menambahkan kode CSS
ini:

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

Setahu saya 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.

Breaking News:
zoomtemplate.com sudah mencapai tahapan final, untuk desain
template sengaja saya buat khusus dengan memasang berbagai efek istimewa dan
beberapa teknik koding yang masih jarang digunakan di template yang ada selama
ini. Semoga cepat kelar ya..dan ditunggu juga untuk sumbangan template rekan lainnya.
thanks