// JavaScript Document
    $(document).ready(function() {  
      
          /*when the user hovers over the DIV that contains the image and the text... */  
          $('.box_container').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... */  
              $(this).find('.box_image').animate({ bottom : 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... '*/  
              $(this).find('.box_image').animate({ bottom : '0px' },{queue:false,duration:300});  
      
          });  
	 $('.box_container2').hover(function(){
            var distance = $(this).outerWidth();
            $(this).find('.box_image2').animate({ top : '-'+distance },{queue:false,duration:300});
        }, function(){
            $(this).find('.box_image2').animate({ top : '0px' },{queue:false,duration:300});
        });  
	  $('.box_container3').hover(function(){
            var distance = $(this).outerHeight();
            $(this).find('.box_image3').animate({ bottom : distance },{queue:false,duration:300});
        }, function(){
            $(this).find('.box_image3').animate({ bottom : '0px' },{queue:false,duration:300});
        });      
	   });