Fazeera Kahar
Short Profile
Dashboard +Follow

The site welcomes colorful and bright people! but if you are RIPPERS , SPAMMERS or HATERS , I will kick you out of my site ! Feel free to roam around !

Hot Clicks

Be My Friends


Memories



Big Claps

Template is 100% made by Fazeera Kahar
All rights reserved ® Fazeera Kahar 2011-2017
Image hover / opacity effect
posted on Sunday, August 14, 2011 | Add comment [1]


terasa malas nak berkata apa2 . kalau nak buat ikut je step yang faz bagi ni ye .

effect 1 : gambar jadi pudar bila cursor menyentuh
effect 2 : gambar yang pudar jadi jelas serta merta apabila cursor menyentuh


lets start !

1. Dashboard > design > page element > add gadget > html/javascript
2. pilih salah satu code di bawah then paste kat ruangan html/javascript tu .

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

code 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 je terus . kalau jadi comment2 ye . 



Blogger nHazlina Suharto said...

thanks.. jd laaa tutor nie.^^

 

Post a Comment