Menampilkan Gambar Transparan, Mouseover Effect
Ini maksudnya apa ya? ok, dari pada aku jelasin panjang lebar coba rekan lihat dulu samplenya di zoomtemplate.com, kalo sudah coba kini arahkan mouse ke gambar yang ada dihalaman postingan..nah disitu rekan akan melihat efek dimana gambar yang semula terang akan menjadi redup atau sanggup juga sebaliknya dari redup menjadi terang dikala dilewati mouse. Mungkin sudah cukup terperinci maksudnya ya, pribadi 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 tolong-menolong 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 pribadi dalam gambar)
<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 pribadi dalam gambar)
<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 kalau setiap image harus diset satu-persatu nilainya propertinya, nah semoga setiap postingan rekan pribadi memilik efek ini secara otomatis, sanggup pribadi menambahkan arahan 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 aku Firefox biasanya memakai property opacity:x untuk melaksanakan tranparancy, berbeda dengan IE yang memakai filter:alpha(opacity=x). Pada Firefox opacity:x nilai pada x sanggup 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 aku buat khusus dengan memasang banyak sekali efek istimewa dan beberapa teknik koding yang masih jarang dipakai di template yang ada selama ini. Semoga cepat kelar ya..dan dinantikan juga untuk pertolongan template rekan lainnya. thanks
Belum ada Komentar untuk "Menampilkan Gambar Transparan, Mouseover Effect"
Posting Komentar