JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div class="outer">
  <div class="inner">
    <img src="http://i.imgur.com/uNTkO5B.jpg" id="image" />
  </div>
</div>

CSS

.outer {
  display: table;
  border: 1px solid black;
  width: 100%;
  height: 300px;
  overflow: hidden;
}

.inner {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

#image {
  display: inline-block;
  margin: 0 auto;
  background-color: black;
  width: 300px;
  height: 200px;
  transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
  transition: transform 0.5s;
  -webkit-transition: transform 0.5s;
  -moz-transition: transform 0.5s;
}

JavaScript

var image_center = $("#image");
var base_image = $(".outer");
var dim = {};

function resetDim() {
  // Initialize image.dim with values
  dim.cont_width = base_image.width(); // Container width
  dim.cont_height = base_image.height(); // Container height
  dim.width = image_center.width(); // Element width
  dim.height = image_center.height(); // Element height

  dim.left_edge = 0;
  dim.top_edge = 0; // Edge translation
  dim.init_x = 0;
  dim.new_x = 0; // Initial/new x position
  dim.init_y = 0;
  dim.new_y = 0; // Initial/new y position
  dim.init_scale = 1;
  dim.new_scale = 1; // Initial/new scale
  dim.max_scale = 3; // Max image scale
};

function transform() {
  var matrix = [dim.new_scale, 0, 0, dim.new_scale, dim.new_x, dim.new_y].join(",");

  image_center.css({
    "transform": "matrix(" + matrix + ") translate3d(0, 0, 0)",
    "-webkit-transform": "matrix(" + matrix + ") translate3d(0, 0, 0)",
    "-moz-transform": "matrix(" + matrix + ") translate3d(0, 0, 0)",
  });
}

$(document).ready(function() {
  resetDim();
  transform();

  $('.outer').bind('mousewheel', function(ev) {
    // onScroll start
    // Determine pointer origin in relation to picture
    var offset = image_center.offset();
    var originX = ev.originalEvent.pageX - offset.left;
    var originY = ev.originalEvent.pageY - offset.top;
    // Calculate current size of the image.
    var width = dim.width * dim.new_scale;
    var height = dim.height * dim.new_scale;
		// Calculate the relative position of the mouse independent of current scale.
    var mx = originX / width;
    var my = originY / height;

    // onScroll ev
    dim.new_scale += (ev.originalEvent.deltaY > 0) ? -0.1 : 0.1;
    if (dim.new_scale > dim.max_scale) dim.new_scale = dim.max_scale;
    else if (dim.new_scale < 1) dim.new_scale = 1;

    // Update new image size and position based upon new scale.
    var new_width = dim.width * dim.new_scale;
    var new_height = dim.height * dim.new_scale;
    var new_mouse_x...