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;
            var $w = $(this).width();
            var $h = $(this).height();
            $(this).data('w',$w).data('h',$h);
            $(this).animate({
                width: $w*$scale,
                height: $h*$scale,
                left: -((($w*$scale) - $w)/2),
                top: -((($h*$scale) - $h)/2)
            }, 'fast');
        },
        mouseout: function(){
            $(this).animate({
                width:  $(this).data('w'),
                height: $(this).data('h'),
                left: 0,
                top: 0
            }, 'fast');
        }
    });