girlwithbighead
 Tutorial : Hover Image Got Something Behind Image (ii)  
19/05/2012 | 14 comments

Assalamualaikum ! Hello ! Hai ! Bonjour !
Sekarang saya banyak publish tutorial dengan freebies kan ? Sebab dekat draft saya banyak sangat. Hari ni je saya dah publish sekaligus tiga. Haha. Oke, hover image ni amat popular.

Preview :
Click here to see live preview

Template Designer : Paste dekat Html/Javascript
Blogskins : Paste dekat bawah </style>
<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>



OLDERNEWER