Add Description of Slide-up to Cover Image

Source jQuery

 <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $(".produk").hover(function(){
  $(this).find(".teks").animate({'opacity':1, 'top':'0'});
 },function(){
  $(this).find(".teks").animate({'opacity':0, 'top':'400px'});
 });
});
</script>

Source CSS

<style type="text/css">
.produk {
 width:300px;
 height:400px;
 overflow:hidden;
 position:relative;
}
.gambar {
 width:300px;
 height:400px;
}
.teks {
 position:absolute;
 display:block;
 color:#FFF;
 text-decoration:none;
 width:300px;
 height:400px;
 padding-top:150px;
 top:400px;
 left:0;
 z-index:3;
 text-align:center;
 /* Tranparent BG */
 background: rgb(0, 0, 0);
 background: rgba(0, 0, 0, 0.6);
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000); /* For IE */
 -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
 opacity:0;
 filter:alpha(opacity=0); /* For IE */
}
</style>