jQuery Cropped Image Hover Zoom -

I'm trying to zoom in on hover image I problem is that the image has been rotated in the Div frame, and When zoomed out, the image is no longer cropped. I want to be something like this script here: but they do not crop the image, where 100% x100%

is such ... CSS code:

  span Out {float: left; Margins: 0 10px 0 0; Padding: 4px 4px 4px 4px; Border: 1px solid # C7C5C8; Clear: left; } Div.crop {width: 100px; Height: 100 pixels; Hidden flurry; Status: Relative; Swim left; } Div.crop img {height: 100%; Status: Completed; }  

HTML code:

  & lt; Span class = "out" & gt; & Lt; Div class = "crop" & gt; & Lt; Img src = "http://www.online-image-editor.com/styles/2013/images/example_image.png" alt = "kitty" /> gt; & Gt; / Div & gt; & Lt; / Span & gt;  

And for the jQuery script, I try this:

  $ (document) .ready (function () {$ ('. Crop.mg) '). hover (function () ($ (this) Kmet ({ "zoom": 12}, 400);}, function () {$ (this) Kmet ({ "zoom": 1}, 400) ;});});  

and (taken from the script in the link above):

  $ (document) .ready (function ( ) {var zoom = 1.1 move = 0; hover $ ( "." crops). (function () {width = $ ( '. crop'). width () * zoom; height = $ ( "." crops). Height () * zoom; $ ('' width ': width,' height ': height,' up ': move,' left ': move}, {duration: 300} ("width" Dry ': $ ( "." Crops). Width (), "height": $ ( "." Crops) height (),' top ',' 0 ',' left ',' 0 '}, {duration : 300});});});  

If I change the ".crop" ".crop img" in the first jQuery code, div and image zoom with a ... but I just need to zoom the image, and the div will have to be constant.

Here the demo:

In the second jQuery code the div is stable ... but the image Not zoomed properly (with the "crop" style).

Demo here: