Hover Position

by Katarn

HTML

<img src="https://picsum.photos/800/800">

CSS

body {
  padding: 0;
  margin: 0;
  overflow: hidden;
}

img {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
}

Babel + JSX

var img = document.querySelector('img');

img.addEventListener('mousemove', ({ target, clientX, clientY}) => {
  const positionX = clientX / target.width * 100;
  const positionY = clientY / target.height * 100;
  target.style.objectPosition = positionX+'% '+positionY+'%';
});