JSFiddle - React, Tailwind, and code Playground

by Riccal

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() {
    return this.each(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.append('<div class="img_menu" />');
            var 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();
});