JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapperImg">
<img class="item" src="kk" alt="test">
</div>

CSS

.wrapperImg{
 height: 200px;width: 200px;
 background: black;   
}
.item{
 height: 100px; width: 100px;
 position: relative;
 margin-top: 50px;
 margin-left: 50px;
}

JavaScript

document.getElementsByClassName('wrapperImg')[0].children[0].onmouseover = zoomPlus;
function zoomPlus(){
  var img = this;
  var intervalID = setInterval(inInterval, 10);
  function checkScale(){
    if(parseInt(img.style.height) > 200){
      clearInterval(intervalID);
    }
  }
  checkScale();
  function inInterval(){
    var currentStyle = img.currentStyle || window.getComputedStyle(img, null);
    var height = parseInt(currentStyle.height);
    var width = parseInt(currentStyle.width);
    var marginTop = parseInt(currentStyle.marginTop);
    var marginLeft = parseInt(currentStyle.marginLeft);
    img.style.height = height+2+'px';
    img.style.width = width+2+'px';
    img.style.marginTop = marginTop-1+'px';
    img.style.marginLeft = marginLeft-1+'px'
    checkScale();
  }
}
document.getElementsByClassName('wrapperImg')[0].children[0].onmouseout = zoomMinus;
function zoomMinus(){
  var img = this;
  var intervalID = setInterval(inInterval, 10);
  function checkScale(){
    if(parseInt(img.style.height) < 100){
      clearInterval(intervalID);
    }
  }
  checkScale();
  function inInterval(){
    var currentStyle = img.currentStyle || window.getComputedStyle(img, null);
    var height = parseInt(currentStyle.height);
    var width = parseInt(currentStyle.width);
    var marginTop = parseInt(currentStyle.marginTop);
    var marginLeft = parseInt(currentStyle.marginLeft);
    img.style.height = height-2+'px';
    img.style.width = width-2+'px';
    img.style.marginTop = marginTop+1+'px';
    img.style.marginLeft = marginLeft+1+'px'
    checkScale();
  }
}