on Hover Image zoom

Question

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.

 <img id="a1" src="http://demos.frnzzz.com/imgZoom/1.jpg" height="50" width="50">
 <img id="a2" src="http://demos.frnzzz.com/imgZoom/1.jpg" height="50" width="50">

Code i have used is

  $(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);
  });
 });

Answer 1

This should do it for you:

http://jsfiddle.net/uCtHh/1/

Hope it helps.

Answer 2

Try this

 $(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',
        position: 'relative'
       }, 500); 
     } , function() {
  $(this).css({'z-index' : '0'});
  $(this).animate({
   marginTop: '0', 
   marginLeft: '0',
   top: '0', 
   left: '0', 
   width: '70px', 
   height: '70px', 
   padding: '5px',
   position: 'static'
   }, 400);
  });
 });