JSFiddle - React, Tailwind, and code Playground

by Sajith Nair

HTML

<div class="img"><img id="pic" src="http://247nywebdesign.com/Testing/nurses-jewel/php/pdt_images/men-wedding-rings.jpg" /></div>

<input class="beta" type="button" onclick="zoom(1.1)" value="+">
<input class="beta" type="button" onclick="zoom(0.9)" value="-">

CSS

.img {
    width:450px;
    height:450px;
}
#pic {
    position: absolute;
    left: 225px;
    top: 225px;
    margin: -225px 0 0 -225px;
}

JavaScript

function zoom(zm) {
    img = document.getElementById("pic")
    wid = img.width
    ht = img.height
    img.style.width = (wid * zm) + "px"
    img.style.height = (ht * zm) + "px"
    img.style.marginLeft = "-" + (wid * zm)/2 + "px"
    img.style.marginTop = "-" + (ht * zm)/2 + "px"
}