Post

Tuto

Free

BG
Afiqah Junizan

Tutorial : Hover Box
19/05/2012 | 6 comments

Assalamualaikum ! Hello ! Hai ! Bonjour !
Cuba tengok dekat miscellaneous dekat atas tu. Nak tahu tak macam mana ? Nilah dia tutorial dia. Follow the instructions.

Preview :

Template Designer : Paste dekat Html/Javascript
Blogskins : Paste dekat bawah </style>
<style type="text/css">
.boxer {
width: 250px;
height: 110px;
margin-top: -130px;
position: fixed;
left: 50px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
z-index: 100;
top: 0px;
}

.boxer:hover   {
margin-top: 0px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
}

.box           {
width: 250px;
background: #fff;
color: #5E5E5E;
padding: 0px;
overflow: hidden;
height: 130px;
}

.close         {
text-transform: lowercase;
top: 130px;
font-size:15px;
position: absolute;
background: #FFAEBC;
color: #777;
padding: 5px;
width:150px;
font-family:arial;
text-align:center;
border-radius: 0px 0px 10px 10px;
-moz-border-radius: 0px 0px 10px 10px;
-webkit-border-radius: 0px 0px 10px 10px;
left: 50px;
}

.close  e, .boxer:hover f   {
display: inline;
opacity:.8;
}

.close  f, .boxer:hover e   {
display: none;
opacity:.8;
}

</style>

<div class="boxer"><div class="close"> <e>Whatever</e> <f>Done!</f> </div>
<div class="box"><table><td><td>
you can put cbox, twitter, bias, affies or whatever.
</td></tr></table></div></div>

OLDERNEWER