Mouse Over

Detail button

by leonardo_ciaccio

HTML

<!--[if IE]> 
 <script src='//html5shiv.googlecode.com/svn/trunk/html5.js'></script> 
<![endif]-->
<div class="container">
    <div class="description" style="display:none;">
        <span class="center-text">Hello World !!!sdfgs
        sf
        gs
        f
        g
        dgsdfgnsldkjbglsjdgl hi hiuog shiod ghiosdh gio hsiogh o
        
        jhdfiugh sdioufghoisudh gfiosh oidfghios<br><br><br>Hello World !!!sdfgs
        sf
        gs
        f
        g
        dgsdfgnsldkjbglsjdgl hi hiuog shiod ghiosdh gio hsiogh o
        
        jhdfiugh sdioufghoisudh gfiosh oidfghios<br><br><br>Hello World !!!sdfgs
        sf
        gs
        f
        g
        dgsdfgnsldkjbglsjdgl hi hiuog shiod ghiosdh gio hsiogh o
        
        jhdfiugh sdioufghoisudh gfiosh oidfghios<br><br><br></span>
    </div>
</div>

CSS

body {
    margin:0px;
    padding:0px;
}
.container {
    position:absolute;
    height:150px;
    width:200px;
    left:50%;
    top:50%;
    margin-left:-75px;
    margin-top:-100px;
    overflow-x:hidden;
    overflow-y:auto;
    cursor:pointer;
    color: #FFFAFA;
    font-size: 14px;
    font-family: Tahoma;
    border: 2px solid #000000;
    background-color: #004275;
    opacity: 0.7;
    border-radius: 10px 10px 10px 10px;
    box-shadow: 2px 2px 23px 6px #454545;
    -webkit-box-shadow: 2px 2px 23px 6px #454545;
    -moz-box-shadow: 2px 2px 23px 6px #454545;
    text-shadow: 1px 1px 0px #000000;
}
.center-text {
    position:absolute;
    background-color:transparent;
    padding:10px;
    font-size:14px;
    width:auto;
    height:auto;
    top:0px;
    left:0px;
    margin-top:0px;
    text-align:left;
}
.description {
    position:absolute;
    background-color:transparent;
    width:100%;
    bottom:0px;
}
::-webkit-scrollbar {									
  	 width: 12px;						
 	 height: 12px;						
}					 				
 ::-webkit-scrollbar-track {					 				
    background: rgba(0, 0, 0, 0.1);	
}					 				
::-webkit-scrollbar-thumb{					 				
  	background: rgba(0, 0, 0, 0.5);	
}					 				
::-webkit-scrollbar-thumb:window-inactive{					 				
 	background: rgba(0, 0, 0, 0.5);	
 }

JavaScript

$('.container').mouseenter(function () {
    $(this).children('.description').show().animate({
        height:'100%'
    }, 500);
});

$('.container').mouseleave(function () {
    $(this).children('.description').animate({
        height:'0%'
    },500,function(){
        $(this).hide();
    });
});