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