I already had help to create the animation for my site. https://creativeandcode.ch/

When you scroll down and see my portfolio there is an animation when you hover it. It works great but when you scroll down the background-image seems to go up and doesn't stick in the original position in the background. Have somebody an idea?

 for (let el of document.querySelectorAll('.hover')) {
  let image = new Image();
  image.src = el.dataset.src;
  image.className = "followMouse";
  el.addEventListener('mouseover',(e)=>{
    document.getElementById('container').append(image);
    image.style.left = `${e.clientX - (image.width/2)}px`;
    image.style.top = `${e.clientY - (image.height/2)}px`;
  })
  el.addEventListener('mouseout',(e)=>{
    image.remove();
  })
}
window.addEventListener('mousemove',(e)=> {
  let image = document.querySelector('.followMouse');
  if (image) {
    image.style.left = `${e.clientX - (image.width/2)}px`;
  image.style.top = `${e.clientY - (image.height/2)}px`;
  }
})

HTML:

<div id="container">
  <a href="" data-src="road.png" class="hover">
    <h1>Hover here!</h1>
  </a>
</div>

CSS:

#container {
  position: relative;
}
.followMouse {
  z-index: -1;
  position: absolute;
}