PhotobucketPhotobucket Photobucket Photobucket Photobucket

Saturday, December 10, 2011

TUTORIAL | Image Hover Effect

Bila Tangan dah Gatal nak hapddett...

Oke, iza nak share satu tutorial dengan korang semua. Tutorial nih iza amik sebijik dan sebijon daripada AMALINA yang sangat-sangat meminati Korean ++ K-pop ! Iza minat jugak korea nih tapi tak sangka pulak dia lagi meminatinya! HEHE.

 Wahh, hero - hero iza! suka kat dorang semua ! hihii ..

Tutorial kali nih ialah IMAGE HOVER EFFECT. ape tuh ? HAHA. Kalau korang tak tahu, pada mereka-mereka yang tak tahu lah, Image Hover Effect nih bila korang hala kan cursor comei korang tuh pada mana-mana gambar yang ada dalam blog iza nih ataupun pada header, gambar tersebut akan jadi lebih terang atau sedikit kabur. Kalau korang semua nak tahu lebih lanjut , cuba hala kan cursor korang kat gambar Hero Boys Over Flower yang kacak kat atas tuh. Kan? Kalau nak jom lah , kita bertutorial. HAHA.

 STEPS :

1) Pergi ke Dashboard > Design > Add Gadget > Pilih HTML / Javascript
2) Copy kod di bawah dan paste di dalam ruangan HTML / Javascript tadi.
3) Pilih lah yang mana korang berkenan.


IMAGE  KABUR >>> TERANG


<style>
/*------ IMAGE ANIMATION------*/
img {filter:alpha(opacity=70);
-moz-opacity:0.7;
opacity:0.7;
}
img:hover {
filter:alpha(opacity=100);
-moz-opacity:.0;
opacity:1.0;
}
</style>


IMAGE TERANG >>> KABUR


<style>
/* ----- Image opacity effect 2 ----- */
.post a img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
}
.post a:hover img {
filter:alpha(opacity=70);
-moz-opacity: 0.7;
opacity: 0.7;
}
</style>

* Tak perlu ubah apa-apa.


4) Preview dan SAVE!


credit to : Amalina

** Kalau dah menjadi , jangan lupa klik SINI dan SINI. Banyak pahala korang dapat nanti. HEHE. 



♥ Menarik? Like dan tinggalkan komen oke! tq ♥

0 000 ucap syg pada Cik Iza:

Related Posts Plugin for WordPress, Blogger...

_Jgn Lupe Klik!_

!♥2010, kini dan Selamanya! Hak Milik Cik Chomeieyza♥!