$(document).ready(function () {  
  
    // transition effect  
    style = 'easeOutQuart';  
  
    // if the mouse hover the image  
    $('.photo').hover(  
        function() {  
            //display heading and caption  
            $(this).children('div:first').stop(false,true).animate({top:0},{duration:100, easing: style});  
            $(this).children('div:last').stop(false,true).animate({bottom:0},{duration:100, easing: style});  
        },  
  
        function() {  
            //hide heading and caption  
            $(this).children('div:first').stop(false,true).animate({top:-193},{duration:100, easing: style});  
            $(this).children('div:last').stop(false,true).animate({bottom:-193},{duration:100, easing: style});  
        }  
    );  
  
});