You can see something very similar on my site - www.forwardfocus.in under Latest Works section.
Here's the function I used to create this effect:
var lis = $("#latest_work li");
$("#latest_work li").hover(
function () {
$(this).find('.description-overlay').animate({top:'20px'}, 300, 'easeOutExpo');
},
function () {
$(this).find('.description-overlay').animate({top:'140px'}, 200, 'easeOutExpo');
}
);
// portfolio item animation
var portfolio_items = $("#portfolio_items .tab_content li");
var portfolio_items_height = $("#portfolio_items .tab_content li").css('height');
portfolio_items.each(function(el){
$(this).find('.description-overlay').css({'height':portfolio_items_he ight,'top':portfolio_items_height});
})
portfolio_items.hover(
function () {
$(this).find('.description-overlay').animate({top:0}, 300, 'easeOutExpo');
},
function () {
$(this).find('.description-overlay').animate({top: portfolio_items_height}, 200, 'easeOutExpo');
}
);
