$(document).ready(function() {
//if mouse over and mouse out
$('.boxTC').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
$('.boxTC').click(function () {
//grab and execute the first link in the thumbnail
window.location = $(this).find('a:first').attr('href');
});
});
