7 June 2011

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

17 comments:

Your words defines you