sobre Hover Ampliar imagen

Estoy intentando implementar el zoom sobre una imagen, encontré un código en google. Pero me está dando resultado no deseado. El zoom de la imagen aparece en la esquina de la ventana.

  

El código que he usado es

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

Esto debería hacerlo por ti:

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

Espero eso ayude.

Prueba esto

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