HOME TUTO BIES ASK

24 December 2012

TUTORIAL : IMAGE HOVER [ Like Yaya ]


Asalamualaikum w.b.t + Salam sejahtera .
Hope this day is the best than yesterday !

Sudah berabad tak buat tuto , Muncul pulak seorang blogger mintak buat kan tuto . Heee tau-2 je , yaya nak buat tuto . Yela yaya bukan pemes sangat sampai semua nak mintak tuto kat yaya kan . Dah kita terus kan .


#Tengok tu 16 dec . Hari ini 24 , baru nak buat . Memang pemalas betul yaya ni .

Hover yang macam mana tu ye kawan-2 . Hmm camni lah

                                     
Comel tak .? Haha habaikan . Lets do it .

 Log in > Dashboard > Design > Add gadget > HTML / Javascript 

  Copy kod bawah ini , dan pastekan dalam ruangan tersebut 



<style type="text/css"> #side{margin-right:-1px;width:250px;height:150px;overflow:hidden;}
#text{text-align:center;width:250px;height:200px;padding:5px;overflow:auto;color:#363636;background-color:#fff;}

#picture{margin-left:-280px;width:280px;height:220px;overflow:hidden;-webkit-transition: opacity 0.9s linear;-webkit-transition: all 0.9s ease-in-out;-moz-transition: all 0.9s ease-in-out;-o-transition: all 0.9s ease-in-out;}
#side:hover #picture{margin-left:-550px;}
</style>
<table id="side" border="0" cellpadding="0" cellspacing="0" ><tr><td><div id="text">You can put anything at here.</div></td><td><div id="picture"><img src="
http://i.imgur.com/wGuOM.jpg"></div></td></tr></table>
NOTES:
YAYA : : Terserah apa korang nak letak
YAYA : : image korang yang comel

#Komen sebelum guna

No comments: