JSFiddle - React, Tailwind, and code Playground

HTML

<img class="item" src="kk" alt="test">

CSS

.item{
 height: 100px; width: 100px;
}

JavaScript

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