$(document).ready(function() {
	
	/*when the user hovers over the DIV that contains the image and the text... */
        $('.caseThumb').hover(function(){

            /*... we get the DIV's width ... '*/
            var width = $(this).outerWidth();

            /*... and change the position of the image to that width with an animation effect...  opacity: 'hide' */
            $(this).find('.thumbnail').animate({ left : width },{queue:false,duration:300});
            /*queue:false means that if hovered again it won't wait for the previous animation to finish
            duration:300 means that the animation effect will take 0.3 seconds to finish '*/

        }, function(){

            /*... and when he hovers out we get the image back to it's starting position using the same function... '  opacity: 'show' */
            $(this).find('.thumbnail').animate({ left : '0px' },{queue:false,duration:300});

        });


});