CSS hover popup DIV

by Ali Khaled

HTML

<div id="gravatar">
    <div id="circle"><center>More Information</center></div>
    <div id="square">

       
       <img width="400px" height="350px" src="http://www.zoomboost.net/main/1/wp-content/themes/dante/images/account-1.jpg"><h2>
       Hello and welcome. here we will display the text that will show regarding the accounts 
       </h2> 
           
    </div>
</div>

CSS

#gravatar
{
    float: left;
}

#circle
{
    background-color: blue;
    float: left;
    height: 20px; 
    width: 130px;
    border-radius: 10px;
    color:white;
}

#square
{
    
	float:left;
    overflow: hidden;
   background-color: orange;
	height: 300px;
    width: 300px;
    opacity: 0;
        
    /* hover OFF */
    -webkit-transition: opacity 1s 0 ease-in-out, height 0 1s ease, width 0 1s ease;
    -moz-transition: opacity 1s 0 ease-in-out, height 0 1s ease, width 0 1s ease;
    -o-transition: opacity 1s 0 ease-in-out, height 0 1s ease, width 0 1s ease;
    -ms-transition: opacity 1s 0 ease-in-out, height 0 1s ease, width 0 1s ease;
    transition: opacity 1s 0 ease-in-out, height 0 1s ease, width 0 1s ease;
}

#square > a
{
    display: block;
    font: 15px Verdana;
    color: #FFF;
    text-decoration: none;
    height: 15px;
    line-height: 15px;
    margin: 10px;
}

#square > a:last-child
{
    margin-top: 0;
}

#square > a:hover
{
    text-decoration: underline;
}

#square:hover,
#circle:hover + #square
{
    height: 700px;
    width: 400px;
    opacity: 1;
    
    /* hover ON */
    -webkit-transition: opacity 1s 0 ease-in-out, height 0 0 ease, width 0 0 ease;
    -moz-transition: opacity 1s 0 ease-in-out, height 0 0 ease, width 0 0 ease;
    -o-transition: opacity 1s 0 ease-in-out, height 0 0 ease, width 0 0 ease;
    -ms-transition: opacity 1s 0 ease-in-out, height 0 0 ease, width 0 0 ease;
    transition: opacity 1s 0 ease-in-out, height 0 0 ease, width 0 0 ease;
}