$(document).ready(function() {

    //if mouse over and mouse out
    $('.eff').hover(
	function() {

	    value = $(this).find('img').outerHeight() * -1;

	    //for left/right if you have different width and height, 
	    //commented out because we are using up/down in this example
	    //value = $(this).find('img').outerWidth() * -1); 

	    //animate the image
	    // you can change the sliding direction by changing bottom to left, right or top
	    // if you changed this, you will have to change the position of the hover out as well
	    $(this).find('img').stop().animate({ bottom: value }, { duration: 500, easing: 'easeOutBounce' });

	},
	function() {

	    //reset the image
	    // the position property (bottom), it must be same with the on in the mouseover
	    $(this).find('img').stop().animate({ bottom: 0 }, { duration: 500, easing: 'easeOutBounce' });

	});

    /*
    //if user clicked on the thumbnail
    $('.eff').click(function () {	
    //grab and execute the first link in the thumbnail
    window.location = $(this).find('a:first').attr('href');
    });
    */

});