JSFiddle - React, Tailwind, and code Playground

by sp182

HTML

<div><img src="http://videsignz.com/images/vi-logo-2012.png"/></div>
<button class="zoomout">Zoom Out</button > <button class="zoomin">Zoom In</button >

CSS

div {height:150px; width:150px; display:block; overflow:hidden; outline: 2px solid #777777; padding:20px; overflow:hidden}
img {width:150px;}
button {font-size:10px; margin:10px;}

JavaScript

var imagesize = $('img').width();
    
    $('.zoomout').on('click', function(){
        imagesize = imagesize - 5;
        $('img').width(imagesize);
    });
    
    $('.zoomin').on('click', function(){
        imagesize = imagesize + 5;
        $('img').width(imagesize);
    });