JSFiddle - React, Tailwind, and code Playground

by clairezita

HTML

<img id="test" src="https://helpx.adobe.com/content/dam/help/en/stock/how-to/visual-reverse-image-search/jcr_content/main-pars/image/visual-reverse-image-search-v2_intro.jpg">

CSS

#test {
  position: absolute;
  transform-origin: 0 0;
}

JavaScript

const img = document.getElementById("test");

let currentScale = 1;

let translateX = 0
let translateY = 0

const factor = 0.1

window.addEventListener('mousewheel', e => {
  const delta = e.wheelDelta / 120
  const nextScale = currentScale + delta * factor
  zoom(nextScale, e)
})

const zoom = (nextScale, event) => {

  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
}