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

18 comments:

  1. Thank a lot! Jadilah!

    ReplyDelete
  2. tengs kihah ! jdlahh sukaa <3

    ReplyDelete
  3. kak sue amek tuto nie, thank you adek :)

    ReplyDelete
  4. Sarah gune tuto nie..Thanks Kihah

    ReplyDelete
  5. dh try , thanx for dis tuto :')

    ReplyDelete
  6. saya ambil tuto ni. thanks :)

    ReplyDelete
  7. knpe anis buat x mau jdi eh ? --' dy x gne edit html rite ? dy just add a gadget tpi awat x mau ?

    ReplyDelete

Your words defines you