Google Extension Effect with CSS or jQuery or MooTools JavaScript

HTML - CSS Only Method

<div class="item itemCss">
 <a href="javascript:;">
  <div class="item-billboard item-billboard-css">
   <img src="my-chrome-theme.jpg">
  </div>
  <div class="item-detail">
   <p>There's more detail about the item inside this DIV!</p>
  </div>
 </a>
</div>

HTML - MooTools Method

<div class="item itemJs">
 <a href="javascript:;">
  <div class="item-billboard" style="margin-top: 0px;">
   <img src="my-chrome-theme.jpg">
  </div>
  <div class="item-detail">
   <p>There's more detail about the item inside this DIV!</p>
  </div>
 </a>
</div>

HTML - jQuery Method

 <div class="item itemJQuery">
  <a href="javascript:;">
   <div class="item-billboard" style="margin-top: 0px;">
    <img src="my-chrome-theme.jpg">
 </div>
   <div class="item-detail">
    <p>There's more detail about the item inside this DIV!</p>
   </div>
  </a>
 </div> 

CSS

.item {
  position: relative;
  width: 240px;
  overflow: hidden;
  border: 1px solid #ccc;
  }
  
.item {
  height: 200px;
  }
  
.item-billboard-css {
    
  -webkit-transition-property: margin-top;
  -webkit-transition-duration: .5s;
  
  -moz-transition-property: margin-top;
  -moz-transition-duration: .5s;
  
  -o-transition-property: margin-top;
  -o-transition-duration: .5s;
  
  -ms-transition-property: margin-top;
  -ms-transition-duration: .5s;
  }
  
.itemCss:hover .item-billboard {
  margin-top: -200px;
  }
  
.item a {
  text-decoration: none;
  color: #000;
  }
  
.item-billboard, .item-detail {
  padding: 10px;
  height: 180px;
  }
  
.item-billboard {
  margin-top: 0;
  background: #fff;
  }
  
.item-billboard h3 {
  font-size: 13px;
  font-weight: bold;
  color: #262626;
  }
  
.item-detail {
  /*background: #ececec;*/
  background: #cd0000;
  color:#FFFFFF;
  }

jQuery.js

Click to Download

MooTools.js

Click to Download

jQuery-Scripts.js

Click to Download

MooTools-Scripts.js

Click to Download

Example

Click to DEMO