$(document).ready(function() {  
      
          /*when the user hovers over the DIV that contains the image and the text... */  
          $('.box_container1').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({ left : width },{queue:false,duration:1000});   
			  
              /*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({ left : '0px' },{queue:false,duration:1000}); 
      
          });  
		  
/*****************************************************************************************************************************/		  
		  
		   /*when the user hovers over the DIV that contains the image and the text... */  
          $('.box_container2').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({ left : width },{queue:false,duration:1000});  
              /*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({ left : '0px' },{queue:false,duration:1000});  
      
          });  
		  
	/*****************************************************************************************************************************/		  
	  
		  $('.box_container3').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({ left : width },{queue:false,duration:1000});  
              /*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({ left : '0px' },{queue:false,duration:1000});  
      
          }); 
		  
		  
/*****************************************************************************************************************************/		  
		  
		  
		  $('.box_container4').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({ left : width },{queue:false,duration:1000});  
              /*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({ left : '0px' },{queue:false,duration:1000});  
      
          });

/*****************************************************************************************************************************/		  
	
		  
		  $('.box_container5').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({ left : width },{queue:false,duration:1000});  
              /*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({ left : '0px' },{queue:false,duration:1000});  
      
          });  


/*****************************************************************************************************************************/		  
	
		  $('.box_container6').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({ left : width },{queue:false,duration:1000});  
              /*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({ left : '0px' },{queue:false,duration:1000});  
      
          });  


/*****************************************************************************************************************************/		  
	
		  $('.box_container7').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({ left : width },{queue:false,duration:1000});  
              /*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({ left : '0px' },{queue:false,duration:1000});  
      
          }); 


/*****************************************************************************************************************************/		  
	
		  $('.box_container8').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({ left : width },{queue:false,duration:1000});  
              /*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({ left : '0px' },{queue:false,duration:1000});  
      
          });  


/*****************************************************************************************************************************/		  
			  
		  $('.box_container9').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({ left : width },{queue:false,duration:1000});  
              /*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({ left : '0px' },{queue:false,duration:1000});  
      
          });  
      
    });