JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://dl.dropboxusercontent.com/u/49468204/image_edit/imagesloaded.pkgd.js"></script>
<script src="https://dl.dropboxusercontent.com/u/49468204/image_edit/jquery.mousewheel.js"></script>
<img class="edit" src="https://dl.dropboxusercontent.com/u/49468204/image_edit/title.jpg">
    <img class="edit" src="https://dl.dropboxusercontent.com/u/49468204/image_edit/title.jpg">

CSS

.img_wrapper {
	overflow:hidden;
	background: grey;
	position:relative;
}
.img_menu {
	width: 2em;
	height: 100%;
	float: right;
	background:black;
	z-index:2;
	position:absolute;
	right:0;
	top: 0;
	visibility: hidden;
}


img {
	z-index: 1;
}

JavaScript

!function($){


$.fn.panzoom = function() {
	var $this = $(this);
	this.imagesLoaded(function(){
        
		$this.wrap('<div class="img_wrapper" />');
		
		var imgEl = $this.parent(".img_wrapper");
        
		imgEl.width($this.width());
		imgEl.height($this.height());
		//imgEl.offset({top:$this.offset().top,left:$this.offset().left});
		
		imgEl.append('<div class="img_menu" />');
		menuEl = imgEl.children(".img_menu");
        
		
		imgEl.hover(function() {
			$(menuEl).css("visibility", "visible");
		},	function() {
			$(menuEl).css("visibility", "hidden");
		});
        
	});
}

}(window.jQuery);


$(document).ready(function(){
	$("img.edit").panzoom();
});