JSFiddle - React, Tailwind, and code Playground

HTML

<div id="canvas">

<img id="test" src="http://content.worldcarfans.co/2008/6/medium/9080606.002.1M.jpg">

</div>

CSS

body{
  overflow:hidden
}
/*#canvas
{
  width:200px;
  height: 200px;
  position: relative;
  z-index : 4;
}*/

#test {
  position: absolute;
   z-index : 2;
   transform-origin : 50% 50%;
}

JavaScript

var currentzoom = 1;
var el = document.getElementById("test"); 
el.addEventListener('mousewheel', e => {
  const delta = e.wheelDelta / 420
  zoom(delta, e)
})

function zoom(delta, e) {
var img = document.getElementById("test");
var width = img.offsetWidth;
var height = img.offsetHeight;
var x = event.offsetX; 
var y = event.offsetY; 
var xpercent = x*100/width;
var ypercent = y*100/height;
	img.style.transform = "scale("+currentzoom+")";
  currentzoom += delta;
  img.style.transformOrigin = xpercent + "% "+ ypercent +"%";
}