Hover Image Got Something Behind Image (PART1)

Assalammualaikum. tuto ni awesome. meh tengok sini.

Sebelum cursor sentuh

Selepas Cursor menyentuh.

PREVIEW 

Dah tengok? comel je kan? mari mulakan.

1. Dashboard > Design > Add Gadget > HTML/Javascript
2. Copy code di bawah dan pastekan dekat dalam kotak HTML

<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://data.whicdn.com/images/28636418/542389_281293305279077_141469352594807_630859_241460565_n_large.jpg"></div></td></tr></table>

NOTES:
MERAH : Ayat korang nak letak dekat dalam tu sebelum Hover.
BIRU : image yang nak diletakkan.

---

Terima kasih baca entry ni. Jangan lupa datang lagi ke sini!

---