//PurpleDreaming.
Tutorial : Image Opacity Effect
Sunday, 16 October 2011 @ 8:47 pm | 0 Comment [s]

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



credit : KIHAH


Older Post | Newer Post
Owner

Hello World..Thanks for willing visit my blog


Navigations

Diary AboutMe Stuffs

Shout Here


Credit Section

Template by : Farisyaa Awayy
Basecode by : AskarPink
Full Edited : Me

Best View at GOOGLE CHROME!