JSFiddle - React, Tailwind, and code Playground

HTML

<div id="insp_container">
        <div id="inspMask">
            <div id="inspImage zoom_box">
                <div class="hotspot" id="hs1">hello</div>
                <img width="100%" height="100%" src="http://lorempixel.com/1200/1000/" alt="">
            </div>
        </div>
    </div>

  <button id="button1" type="button">+</button>
<button id="button2" type="button">-</button>

CSS

#insp_container {
  width: 740px;
  margin: 10px auto;
}

#inspHeader {
  margin: 0;
  height: 67px;
}

#inspMask {
  width: 600px;
  height: 500px;
  overflow: hidden;
  margin: 0;
}

#inspImage {
  width: 1200px;
  height: 1000px;
}

.hotspot {
  background-color: #FF0;
}

#hs1 {
  position: absolute;
  width: 200px;
  height: 200px;
  top: 100px;
  left: 300px;
}

JavaScript

$(function(){
        // Stuff to do as soon as the DOM is ready. Use $() w/o colliding with other libs;
        // Make sure it always starts @ zero position for below calcs to work
        $('#inspMask').css({top: 0, left: 0});
        var maskWidth  = $("#inspMask").width();
        var maskHeight = $("#inspMask").height();
        var imgPos     = $("#inspImage").offset();
        var imgWidth   = $("#inspImage").width();
        var imgHeight  = $("#inspImage").height();
        var x1 = (imgPos.left + maskWidth) - imgWidth;
        var y1 = (imgPos.top + maskHeight) - imgHeight;
        var x2 = imgPos.left;
        var y2 = imgPos.top;
        $("#inspImage").draggable({ containment: [x1,y1,x2,y2] });
        $("#inspImage").css({cursor: 'move'});
$("button").live("click", function(){
  alert("Handler for .click() called.");
});
    });