Show cursor image on hover with GSAP - center issue

Question

I am using GSAP to show an image on hover that follows the cursor while moving around, it all works fine but I can't get the image to 'center center' the cursor, what am I missing?

const items = document.querySelectorAll('.container')

items.forEach((el) => {
  const image = el.querySelector('img')
  
  el.addEventListener('mouseenter', (e) => {
    gsap.to(image, { autoAlpha: 1 })
  })
  
   el.addEventListener('mouseleave', (e) => {
    gsap.to(image, { autoAlpha: 0 })
  })
  
  el.addEventListener('mousemove', (e) => {
    gsap.set(image, { x: e.offsetX })
  })
})

.container {
  position:relative;
  background:#ff0000;
  width:100%;
  height:60px;
}

.container img {
  position: absolute;
  width: 200px;
  height: 200px;
  object-fit: cover;
  transform: translateX(-50%) translateY(-50%);
  top: 50%;
  left: 50%;
  z-index: -10;
  opacity: 0;
  visibily: hidden;
  pointer-events: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.1/gsap.min.js"></script>

<div class="container">
  <img src="https://source.unsplash.com/random">
</div>

Answer 1

You need to remove left: 50%; from .container img.

const items = document.querySelectorAll('.container')

items.forEach((el) => {
  const image = el.querySelector('img')
  
  el.addEventListener('mouseenter', (e) => {
    gsap.to(image, { autoAlpha: 1 })
  })
  
   el.addEventListener('mouseleave', (e) => {
    gsap.to(image, { autoAlpha: 0 })
  })
  
  el.addEventListener('mousemove', (e) => {
    gsap.set(image, { x: e.offsetX })
  })
})

.container {
  position:relative;
  background:#ff0000;
  width:100%;
  height:60px;
}

.container img {
  position: absolute;
  width: 200px;
  height: 200px;
  object-fit: cover;
  transform: translateX(-50%) translateY(-50%);
  top: 50%;
  z-index: -10;
  opacity: 0;
  visibily: hidden;
  pointer-events: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.1/gsap.min.js"></script>

<div class="container">
  <img src="https://source.unsplash.com/random">
</div>