fdgjhk

/* BOX 1 */

#box {
    position:fixed;
    top:30px; /* distance from top*/
    left:30px; /* distance from left*/
    border:1px solid #000000; /* border colour*/
    width:4px; /* box width*/
    height:4px; /* box height*/
    padding:2px;
    z-index:9999999; /* every box you add take off a nine from here */
    -webkit-transition: all 0.8s ease-out;-moz-transition: all 0.8s ease-out;transition: all 0.8s ease-out;
}


#box:hover {
    height:150px; /* content box height */
    width:85px; /* content box width */
    background:#fff;

}

#box:hover #cont {
    opacity:1;
    /* keep these same as above but take off 5 px from width */
    width:80px;
    height:150px;
}

#cont {
    position:fixed;
    padding:2px;
    text-align:center;
    overflow:hidden;
    width:0;
    height:0;
    opacity:0;
    z-index:9;
    -webkit-transition: all 0.8s ease-out;-moz-transition: all 0.8s ease-out;transition: all 0.8s ease-out;
}

/* BOX 2 */

#box2 {
    position:fixed;
    top:30px;
    left:44px;
    border:1px solid #000000;
    width:4px;
    height:4px;
    padding:2px;
    z-index:999999;
    -webkit-transition: all 0.8s ease-out;-moz-transition: all 0.8s ease-out;transition: all 0.8s ease-out;
}


#box2:hover {
    height:150px;
    width:85px;
    background:#fff;
}

#box2:hover #cont2 {
    opacity:1;
    width:80px;
    height:150px;
}

#cont2 {
    position:fixed;
    font-size:10px;
    padding:2px;
    text-align:center;
    overflow:hidden;
    width:0;
    height:0;
    opacity:0;
    z-index:9;
    -webkit-transition: all 0.8s ease-out;-moz-transition: all 0.8s ease-out;transition: all 0.8s ease-out;
}

/* BOX 3 */

#box3 {
    position:fixed;
    top:30px;
    left:58px;
    border:1px solid #000000;
    width:4px;
    height:4px;
    padding:2px;
    z-index:99999;
    -webkit-transition: all 0.8s ease-out;-moz-transition: all 0.8s ease-out;transition: all 0.8s ease-out;
}


#box3:hover {
    height:150px;
    width:85px;
    background:#fff;
}

#box3:hover #cont3 {
    opacity:1;
    width:80px;
    height:150px;
}

#cont3 {
    position:fixed;
    font-size:10px;
    padding:2px;
    text-align:center;
    overflow:hidden;
    width:0;
    height:0;
    opacity:0;
    z-index:9;
    -webkit-transition: all 0.8s ease-out;-moz-transition: all 0.8s ease-out;transition: all 0.8s ease-out;
}


<body>
<div id="box">
<div id="cont">
XVIII, polish,
<br>i like cute girls
<br><br>i'm good at ruining lives.
<br><br>this blog contains dicks and boobs
</div>
</div>


<div id="box2">
<div id="cont2">
<br>Girlfriend:
<br><a href="http://sherleg.tumblr.com//">Femke</a>

<br><br>Fiancee:
<br><a href="http://aconissa.tumblr.com">Ana Rosa</a>
</div>
</div>

<div id="box3">
<div id="cont3">
<br>Network:
<br><a href="http://thejarenenetwork.tumblr.com/">The Jarene Network</a>

<br><br>Side Blogs:

<br><a href="http://evilandgay.tumblr.com/">photography & art</a>
<br><a href="http://historywithwomen.tumblr.com/">women in history</a>
</div>
</div>