JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<a id="zoom" href="#">Zoom</a>
<div id="container">
    <div id="debug-x"></div>
    <div id="debug-y"></div>
    <div id="border"></div>
    <img src="http://lorempixel.com/sports/400/300/" />
</div>

CSS

#container
{
    width:300px;
    height:200px;
    position:relative;
    margin:20px 0 0 0;
    background: gray;
    
}

#container #border
{
    width:300px;
    height:200px;
    border:1px red solid;
    position:absolute;
    left:0;
    top:0;
    z-index:2;
}

#container #img
{
    position:absolute;
    left:0;
    top:0;
    z-index:1;
}

#zoom
{
     position:relative;
    z-index:3;
}
}

JavaScript

$("img").draggable();


// debug lines

$("#debug-x").css({
    position: "absolute",
    top: $("#container").height() / 2,
    width: $("#container").width(),
    height: "1px",
    "border-top": "1px red solid",
    "z-index": "10000"
});

$("#debug-y").css({
    position: "absolute",
    left: $("#container").width() / 2,
    height: $("#container").height(),
    width: "1px",
    "border-left": "1px red solid",
    "z-index": "10000"
});


$("#zoom").on("click", function(e)
{
    
    var container = $("#container");
    var image = $("#container img");
    
    var css = {};

    css.height = image.height() + (image.height() * 0.2);
    css.width = image.width() + (image.width() * 0.2);
    
    var x = Math.abs(image.position().left) + container.width() / 2;
    var y = Math.abs(image.position().top) + container.height() / 2;
    
    var ratio = css.width / image.width();
    
    var newX = x * ratio;
    var newY = y * ratio;
    
    css.left = image.position().left - (newX - x);
    css.top = image.position().top - (newY - y);
    
    image.css(css);
});