JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<div id="parent">
    <img src="http://placekitten.com/g/200/300" alt="" />
</div>

CSS

#parent {
    float: left;
    overflow: hidden;
    position: relative;
    width: 180px;
    height: 280px;
}

#parent img {
    position: absolute;
    top: 0px;
    left: 0px;
}

JavaScript

var zoom = '20';

var img = $('img');
// Kuva pienennetty kehyksen kokoon.
// Alkuperäinen kuvankoko on se mihin zoomataan.
img.css({ width: '180', height: '280' });

var imgH = img.height();
var imgW = img.width();


$("#parent").hover(
  function () {
    img.stop().animate({
        width: '200',
        height: '300',
        top: -('0' + zoom / 2),
        left: -('0' + zoom / 2)
    }, 1200 );
  }, 
  function () {
    img.stop().animate({
        width: '180',
        height: '280',
        top: -('0'),
        left: -('0')
    }, 1200 );
  }
);