Post

Tuto

Free

BG
Afiqah Junizan

Tutorial : Hover Image Got Something Behind Image (iii)
21/06/2012 | 25 comments


Assalamualaikum! Ok, hari ni buat part (iii) pulak sebab orang request. Jangan lupa credit taw.

Preview :

Template Designer : Paste dekat Html/Javascript
Blogskins : Paste dekat bawah </style>
<style>.side2{
position:absolute;
overflow:hidden;
padding:17px;}

#side {
top:180px;left:110px;
position:fixed;
height:auto;
width:200px;}

#side:hover #text {
opacity:0.9;
margin-top:70px;
-webkit-transition: 0.8s;}

#text {
opacity:0;
margin-top:-100px;
margin-left:17px;
font-size:8px;
font-family:arial;
padding:7px;
font-style:normal;
position:absolute;
width:236px;
text-align:center;
height:auto;
text-transform:lowercase;
color:#000;
background-color:pink;
-webkit-transition: 0.8s;}
</style>
<div id="side"><div class="side2"><img src="urlimage" width="250px;" height="140px;"</div>
<div id="text">your word at here</div></div>
OLDERNEWER