// JavaScript Document

$(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});
        }
    );
 
});