$(document).ready(function()
{
    var zindex = 9;
    
    $("ul.thumb li").hover(
        function() 
        {
            var li = $(this);
            
            $(this).css({'z-index' : zindex}); /*Add a higher z-index value so this image stays on top*/ 
            zindex++;
            
            $(this).find('img').addClass("hover").stop() /* Add class of "hover", then stop animation queue buildup*/
                .animate({
                    marginTop: '0px', /* The next 4 lines will vertically align this image */ 
                    marginLeft: '0px',
                    top: '-20px',
                    left: '-20px',
                    width: '80px', /* Set new width */
                    height: '80px', /* Set new height */
                    padding: '0px'
                }, 200, '', function()
                {
                    li.find('div').fadeTo('speed', 0.6);
                });

        }
        , 
        function() 
        {
            var li = $(this);
            
            $(this).find('div').fadeOut('speed', function()
            {
                li.find('img').removeClass("hover").stop()  /* Remove the "hover" class , then stop animation queue buildup*/
                .animate({
                    marginTop: '0', /* Set alignment back to default */
                    marginLeft: '0',
                    top: '0',
                    left: '0',
                    width: '40px', /* Set width back to default */
                    height: '40px', /* Set height back to default */
                    padding: '0px'
                }, 400, '', function()
                {
                    li.css({'z-index' : '0'}); /* Set z-index back to 0 */
                });
            });
        }
    );
});
