on Hover Image zoom
<p>I am trying to implement on hover zoom on a image, i found some code in google. But it is giving me unwanted result. The image zoom is appearing at the corner of the window.  </p>

<pre><code> &lt;img id="a1" src="http://demos.frnzzz.com/imgZoom/1.jpg" height="50" width="50"&gt;
 &lt;img id="a2" src="http://demos.frnzzz.com/imgZoom/1.jpg" height="50" width="50"&gt;
</code></pre>

<p>Code i have used is   </p>

<pre><code>  $(function()
  {
       $('img').hover(function()
       {
        $(this).css({'z-index' : '10'});
        $(this).animate({
        marginTop: '-110px', 
        marginLeft: '-110px', 
        top: '50%',
        left: '50%', 
        width: '174px', 
        height: '174px',
        padding: '10px'
       }, 500); 
     } , function() {
  $(this).css({'z-index' : '0'});
  $(this).animate({
   marginTop: '0', 
   marginLeft: '0',
   top: '0', 
   left: '0', 
   width: '70px', 
   height: '70px', 
   padding: '5px'
   }, 400);
  });
 });
</code></pre>
