将光标悬停在元素上时使图像跟随光标

<div class="container">
  <img src="image.jpg" alt="Image">
</div>

.container {
  position: relative;
}

.container img {
  position: absolute;
  transition: transform 0.3s ease;
}

const container = document.querySelector('.container');
const image = document.querySelector('.container img');

container.addEventListener('mousemove', (e) => {
  const x = e.clientX - container.offsetLeft;
  const y = e.clientY - container.offsetTop;
  
  image.style.transform = `translate(${x}px, ${y}px)`;
});

container.addEventListener('mouseleave', () => {
  image.style.transform = 'translate(0, 0)';
});