ANIMATE - MOVE / OVERLAY ON HOVER

by bizamajig

HTML

<div class="item">
    <div class="block"></div>
    <div class="info">
           My info
    </div>
</div>

CSS

.item {
    background: #ccc;
  width: 200px;
    height: 300px;
}
.block {
    height: 50px;
    background: red;
    width: 100%;
}
.info{
    background: green;
    height: 20px;
    width: 100%;
}

JavaScript

jQuery(document).ready(function($) {
    $(".item").mouseover(function(){
        $('.info').animate({ marginTop: '-50px' , opacity: 0.5 }, 1000);
    });
});