JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div class="scale">
        <div class="img_container">
            <img src="https://i.imgur.com/NtnOPYj.jpg" />
        </div>
        <div class="buttons">
            <div class="plus">+</div>
            <div class="minus">-</div>
        </div>
    </div>
</body>

CSS

body {background-color: #000;}
.img_container{
    width: 500px;
    height: 375px;
    overflow: hidden;
    border: 6px solid #fff;
    background-color: #fff;
    float: left;
}
.img_container img:hover{
    cursor: move;
}
.buttons{ 
    float: left;
    margin-top: 337px;
}
.plus, .minus{  
    margin: 5px;    
    background-color: #fff;
    width: 50px; 
    text-align: center;
    
}
.plus:hover, .minus:hover {
    cursor: pointer;
    border: 1px solid red;
    background-color: #eee;
}

JavaScript

$(function(){
    $.fn.scale = function (percent){
        this.stop(true,false).effect("scale", { percent: percent}, 350);
    }
    var wrapper = $('.scale'),
        container = wrapper.find('div.img_container')
        img = container.find('img'),
        plus = wrapper.find('.plus'),
        minus = wrapper.find('.minus'),
        free = true;
    
    plus.click(function(){ img.scale(125); });
    minus.click(function(){ img.scale(75) });   
                            
    img.draggable();
});