JSFiddle - React, Tailwind, and code Playground

HTML

<div class="pixbox">
    <img class="zoom" src="http://4.bp.blogspot.com/-r9_MDT-WxR0/Tyr9-4hGSCI/AAAAAAAAK9E/H-sLSyZs7Q4/s640/virgineRopars1.jpg">
</div>

<div class="pixbox">
    <img class="zoom" src="http://2.bp.blogspot.com/-W2DDRDuX-A4/TwtXg7iyG8I/AAAAAAAAK0Q/mMkK1Gos1kA/s640/ZacSteinec.TwistedLamb5">
</div>

<div class="pixbox">
    <img class="zoom" src="http://3.bp.blogspot.com/-MXr4SMkZr0I/Tyr99O_jRII/AAAAAAAAK8c/lQO4_hS02rE/s640/Virgine+Ropars32_13.JPG">
</div>

CSS

.pixbox {
    position: relative;
    float: left;
    margin: 30px 0 0 30px;
    width: 120px;
    height: 180px;
    overflow: hidden;
    border: 1px solid #000;
    }

img {
    position: absolute;
    width: 120px;
    height: 180px;
    }

JavaScript

$('.pixbox img').on({
        mouseover: function(){
            var $scale = 1.5;
            if (!$(this).data('w'))
            {
                var $w = $(this).width();
                var $h = $(this).height();
                $(this).data('w', $w).data('h', $h);
            }
            $(this).stop(true).animate({
                width: $(this).data('w')*$scale,
                height: $(this).data('h')*$scale,
                left: -$(this).data('w')*($scale - 1)/2,
                top:  -$(this).data('h')*($scale - 1)/2
            }, 'fast');
        },
        mouseout: function(){
            $(this).stop(true).animate({
                width:  $(this).data('w'),
                height: $(this).data('h'),
                left: 0,
                top: 0
            }, 'fast');
        }
    });