Tutorial: Pasang Image Opacity Effect

WRITTEN BY : Arep Skema TIME : 11:44 AM TOTAL COMMENTS : 3
Okeh,,dah lama tak buat tutorial nie. So aku buat balek lah, tutorial yang nie, aku nak tunjukkan cara buat Image Opacity Effect. Tak tau ape kejadahnyer nie. Benda nie akan megubahkan opacity gambar kita bila mouse kita hover kat gambar yang ada kat post kita Benda nie ade dua fungsi yang berbeza
Effect pertama Gambar akan pudar bila mouse diletakkan kat atas gambar korang tu. Contohnya macam nie:


Effect kedua  nie pulak sebaliknya, gambar asal korang akan pudar dan akan bertukar terang bila mouse korang letak kat atas gambar tu.

Okeh,ikut langkah langkah nie kalau korang nak buat,

1.  Pergi Design ==> Page Element ==> Add A Gadget ==> HTML/Javascript.
2.  Copy / Salin kod dekat bawah nie:
- Ini untuk Effect yang pertama:

<style>/* ----- Image opacity effect 1 ----- */.post a img {filter:alpha(opacity=100);-moz-opacity: 1.0;opacity: 1.0;-khtml-opacity: 1.0;}
.post a:hover img {filter:alpha(opacity=50);-moz-opacity: 0.5;opacity: 0.5;-khtml-opacity: 0.5; }</style>

-Ini pulak untuk effect yang kedua:

<style>/* ----- Image opacity effect 2 ----- */.post a img {filter:alpha(opacity=50);-moz-opacity: 0.5;opacity: 0.5;-khtml-opacity: 0.5;}
.post a:hover img {filter:alpha(opacity=100);-moz-opacity: 1.0;opacity: 1.0;-khtml-opacity: 1.0;}</style>

3. Paste kod yang korang salin tadi kat bahagian HTML/JAVASCRIPT.
4. Klik Save!


Related Posts Plugin for WordPress, Blogger...

3 comments:

Dah baca kan? Komen lah sikit. Sikit pun jadilah.
Fikir sebelum menaip. ;)