Tutorial : Image Opacity Effect

Assalamualaikum. Someone ask me how I make the picture being fade when the cursor touch it. So, here is the answer for the question.

Image opacity effect 1
Gambar menjadi pudar apabila cursor menyentuh gambar.

Image opacity effect 2
Kesan adalah sebaliknya, iaitu gambar yang pudar bertukar terang dan jelas apabila cursor menyentuh Gambar.

Mudah je nak pasang Image opacity effect nie. Ikut step je :).

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

2. Copy salah satu kod di bawah dan paste pada content HTML/Javascript.

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>

3. Save :)