Tutorial : Image Opacity Effect

image from here

Esok ade exam sivik tapi still menghadap laptop. Oke lepas ni nak belek buku teks sivik :p


Masa untuk tutorial. This time nak ajar korang buat image opacity effect kat blog korang. Hoho suke tak suke tak? Ok tak suke. You all tau tak ape bende image opacity effect tu? Kalau yang dah tau, sila main jauh-jauh. Kalau yang tak tau, boleh datang dekat tapi jangan pegang-pegang ok. Boleh pandang-pandang, jangan pegang-pegang *sudah mula mengarut.

Image opacity effect ni ade 2 jenis tau. Tau tak tau tak? Haa tak tau kan :p

Jenis pertama : Bila korang letakkan cursor mouse kat gambar, die jadi pudar.
Jenis kedua : Bila korang letakkan cursor kat gambar yang pudar, die jadi terang dan jelas.

Ok I sudah inform jenis-jenis die, sekarang jom tengok cara-cara die ;

Step 1
Dashboard > Design > Add Gadget > Html/Javascript

Step 2
Copy salah satu kod effect yang korang nak gune dan pastekan kat kotak gadget Html tu.

Ni kod 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>

Ni kod 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>

Step 3
Dah siap copy paste? Save dan tengok hasil die :)


Comments

dyiera said…
TY untok tuto niey!
my stories said…
thanks for this tutor !
syaza kelyza said…
thanks for this :)
farina said…
kenapa sy buat tak jadi ekk? sedih betul D:
Cik Tyrah said…
@farina
Kena save dulu baru jadi :)