$(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:200, easing: style});
            $(this).children("div:last").stop(false,true).animate({bottom:0},{duration:200, easing: style});
        },
        function() {
            //hide heading and caption
            $(this).children("div:first").stop(false,true).animate({top:-50},{duration:200, easing: style});
            $(this).children("div:last").stop(false,true).animate({bottom:-50},{duration:200, easing: style});
        }
    );
});