#sidebar-position{
border:1px dashed pink;
z-index:9999;
background:url(http://i.imgur.com/uQKYr.png);
padding:5px;
width:410px}
#back{
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
border:4px solid #fff;
background-image: url('http://data.whicdn.com/images/41890143/tumblr_mcvaffUv5u1qb0d07o2_500_large.gif'); width:400px;
height:180px;
overflow:hidden;
margin-right:6px;
margin-bottom:5px;}
#back:hover{
border:4px solid pink;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;}
.titu {
margin-right:-90px;
margin-top:-60px;
font:28px 'tabitha';
padding:5px;
-webkit-transition:all .3s linear;
-moz-transition:all .3s linear;transition:all .3s linear;
text-align:center;
color:#fff;
background:pink;
padding:3px;
letter-spacing:3px;}
@font-face{font-family:tabitha;src:url('http://static.tumblr.com/eq1rpir/YvSm6kvcd/tabitha.ttf')}
#statuss {
margin-top:200px;
-webkit-transition:all .3s linear;
-moz-transition:all .3s linear;
transition:all .3s linear;
font:8px 'tinytots';
text-transform:uppercase;
color:#000;
padding:3px;
background:#fff;
display:block;
height:250px;}
#back:hover .titu {margin-top:0px}
#back:hover #statuss {margin-top:0px;}
@font-face {font-family: "tinytots";src: url('http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf');}
</style><div id="sidebar-position">
<center>
<div id="back">
<div class="titu">
My Life Status</div>
<div id="statuss">
<div id="status">
<br/><br/><br/><br/><br/><br/>
You may put anything at here, such as status, cbox, twitter or bla bla bla.
</div>
</div>
</div>
</div>