$(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
					top.location.href = $(this).find('a:first').attr('href');
				});
				
			});