Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
  
  ul{list-style:none;}
  a{text-decoration:none;}
  
  .box{
    position:relative;
    background:#eee;
    width:200px;
    height:100%;
    padding:15px;
    overflow:hidden;
  }
  .curtain{
    position:absolute;
    display:none;
    bottom:0px;
    width:230px;
    margin-left:-15px;
    background:rgba(100,100,100,0.7);
  }
​
  
</style>
</head>
<body>
  
​
  <div class="box">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse augue eros, pharetra eu hendrerit et, varius et ante. Vivamus congue aliquet felis ac mollis. Mauris molestie, nisi vel luctus aliquet, felis neque imperdiet ligula, vel lobortis erat felis sed urna. Aliquam et turpis sem. Aliquam erat volutpat. Mauris dignissim, nisi quis pellentesque facilisis, neque nunc bibendum felis, laoreet tristique ante tortor nec felis. 
    
    <div class="curtain"><h2>Lorem ipsum</h2></div>
  </div>
  
  
</body>
</html>
 
​
//var boxHeight = $('.box').innerHeight();
​
//$('.curtain').css({top:boxHeight});
​
$('.box').hover(function(){
  $(this).find('.curtain').stop().animate({height: 'toggle'});
​
});
​
​
​
Output 300px

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers