光标进入图像时闪烁的图像

当光标在图像上移动时,我正在制作一个简单的缩放效果,唯一的问题是当光标进入图像时,它开始闪烁。

这是一种有效的缩放方式,因为它可以将光标放在图像上,所以不会给进入图像的光标带来不便。

这是在一个shopify商店里,我没有img标签的访问权限,只能使用这些类。

我试图更改变换原点并添加背面,但问题仍然存在。

Javascript:

function habilitarZoom() {
    const images = document.getElementsByClassName('rimage__image');
  
    for (let i = 0; i < imagenes.length; i++) {
      const image = imagenes[i];
      const container = image.parentNode;
  
      contenedor.addEventListener('mousemove', function(event) {
        const containerRect = container.getBoundingClientRect();
        const imageRect = image.getBoundingClientRect();
  
        const offsetX = (event.clientX - containerRect.left) / containerRect.width;
        const offsetY = (event.clientY - containerRect.top) / containerRect.height;
  
        const translateX = (imageRect.width - contenedorRect.width) * offsetX;
        const translateY = (imageRect.height - contenedorRect.height) * offsetY;
  
        image.style.transformOrigin = `${offsetX * 50}% ${offsetY * 50}%`;
        image.style.transform = `scale(2.5) translate(${-translateX}px, ${-translateY}px)`;
      });
  
      contenedor.addEventListener('mouseout', function() {
        image.style.transformOrigin = 'center center';
        image.style.transform = 'scale(1) translate(0, 0)';
      });
    }
  }

document.addEventListener('DOMContentLoaded', function() {
    habilitarZoom();
});

CSS:

.rimage__image {
  transition: transform 3s ease;
}

.rimage__image:hover {
  transform: scale(2.5);
  }

.rimage-wrapper{
  overflow: hidden;
}