JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <img src="https://source.unsplash.com/random/300x300?sky">
</div>

CSS

img {
  transform-origin: 0 0;
}

JavaScript

const img = document.querySelector("img");

let currentScale = 1;

let translateX = 0
let translateY = 0

img.addEventListener('mousewheel', e => {
  const delta = e.deltaY * -0.01
  const nextScale = currentScale + delta
  
  const ratio = 1 - nextScale / currentScale

  const {
    clientX,
    clientY
  } = event

  translateX += (clientX - translateX) * ratio
  translateY += (clientY - translateY) * ratio
 
  img.style.transform = `translate(${translateX}px, ${translateY}px) scale(${nextScale})`

  currentScale = nextScale
})