Rollup Doc Options

HTML

<div class="item">
    <div class="item-billboard">
      <h3>Angry Birds</h3>
    </div>
    <div class="item-detail">
      <p>There's more detail about the item inside this DIV!</p>
    </div>
</div>

CSS

.item {
  position: relative;
  width: 240px;
  overflow: hidden;
  border: 1px solid #ccc;
}
  .item {
    height: 200px;
  }
  
  .item a {
    text-decoration: none;
    color: #000;
  }
  
  .item-billboard, .item-detail {
    padding: 10px;
    height: 180px;
  }
  
  .item-billboard {
    margin-top: 0;
    background: red;
  }
    .item-billboard h3 {
      font-size: 13px;
      font-weight: bold;
      color: #262626;
      font-family: "Open Sans", arial, sans-serif;
    }
  
  .item-detail {
    background: #ececec;
  }

JavaScript

jQuery(document).ready(function() {
  jQuery(".itemJQuery").bind({
    mouseenter: function() {
      var self = jQuery(this), billboard = self.data("billboardElement");
      if(!billboard) {
        billboard = jQuery(jQuery(".item-billboard", this)[0]);
        self.data("billboardElement", billboard);
      }
      jQuery(billboard).stop().animate({
        "margin-top": "-200px"
      });
    },
    mouseleave: function() {
      jQuery(this).data("billboardElement").stop().animate({
        "margin-top": 0
      });
    }
  });
});