girlwithbighead
 Tutorial : Hover Box (iv)  
29/09/2012 | 5 comments


My own coding, don't re-post.

Preview :
Template Designer : Paste dekat Html/Javascript.
Blogskins :  Paste dekat bawah </style> .

<style>
.tito {
width:150px;
color:#fff;
padding:4px;background: #444;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;}

.tito:hover {
-webkit-transition: 1.0s;
-moz-transition: 1.0s;}

#note {
border-radius:10px;
border:1px dashed #aaa;
margin-top:627px;
width:180px;
margin-left:-550px;
padding:4px;
position: fixed;
text-align:left;
background:#FFCCCC;
color:#444;
opacity: 0;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;}

.tito:hover #note {
margin-top:350px;
opacity: 1;
overflow:hidden;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;}
</style>

<div class="tito">Disclaimer<br /><div id="note">
you can put anything at here such as twitter update , status and bla bla bla. avoid from putting link.</div>
</div>



OLDERNEWER