Image Zoom in and out with jquery

Image zoom in  and out with jquery

<h1>Image Zoom In and Zoom Out</h1>
<img alt="image zoom in and out" id="image1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicJ7zuEkLYvg4w_FGf0RRqor2TheVl0Nl-o-VgA_slRJv5HJpB9IZhQepFBJL2pEDARxP3FkcWW7Wuu5XwuSeDvu4suX9cUg4Lpy7T1HLoW11Bo-lF7F-p3xfpsSvJieaDRdbOoGAzpM3K/s1600/ShadowEffect.jpg" title="image zoom with jquery" />

$(document).ready(function(){
       $('#image1').width(200);
       $('#image1').mouseover(function()
       {
          $(this).css("cursor","pointer");
          $(this).animate({width: "300px"}, 'slow');
       });
    
    $('#image1').mouseout(function() {   
          $(this).animate({width: "200px"}, 'slow');
    });
});

Demo/Download