Tutorial : Hover Box  

<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>