Hover Image *8
Hello!Kali nie nk bgi tuto about hover image n then kluar words
Contoh :
Before :
Hovering :
Finally :
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>
OREN : Url Image :)
PURPLE : Ayat jiwang awak xD
Labels: hover, image, image hover, tuto
Hover Image *8
Hello!Kali nie nk bgi tuto about hover image n then kluar words
Contoh :
Before :
Hovering :
Finally :
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>
OREN : Url Image :)
PURPLE : Ayat jiwang awak xD
Labels: hover, image, image hover, tuto
|