Tutorial: Image Opacity Effect

Tuto kali ni pulak pasal Image Opacity Effect . Tuto ni ada dua jenis .

Nak tau jenis-jenisnya baca kat bawah ni .

Image opacity effect 1

Gambar jadi pudar bila cursor menyentuh gambar.

Image opacity effect 2

Yang ni pula terbalik , gambar yang pudar pulak bertukar terang dan jelas apabila cursor menyentuh .

Follow step bawah ni:

1. Dashboard --> Design --> Add A Gadget --> HTML/Javascript

2. Copy salah satu kod kat bawah ni and pastekan

Kod image opacity effect 1

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

Kod image opacity effect 2

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