How to make the images move smoothly behind the mouse

Question

Sorry for my poor english:) There is a block, it is necessary that when you move the mouse on it, images appear and disappear and they should move smoothly behind the mouse, like on this site on the main page: https://www.makemepulse.com/ . Here is my example, but it is completely bad and does not work

function photo() {

        const gifPortfolio = document.querySelector('.gif__portfolio__inner');

        gifPortfolio.addEventListener("mousemove", getClickPosition, false);
        function getClickPosition (e) { //слушатель события движения мыши
            let picture = document.querySelectorAll(".gif__photo");
            let parentPosition = getPosition(e.currentTarget);
            picture.forEach(item => {
                let xPosition = e.clientX - parentPosition.x - (item.clientWidth / 2);
                let yPosition = e.clientY - parentPosition.y - (item.clientHeight / 2);
                item.style.left = xPosition + "px";
                item.style.top = yPosition + "px";
                item.style.transition = '1s';
                item.style.opacity = '1';
                item.classList.add('active');
                item.style.borderRadius = '0';
                setTimeout(() => {
                    item.style.opacity = '0';
                }, 400);
            });
        }
           
        function getPosition(element) { //расчёт позиции элемента
            let xPos = 0;
            let yPos = 0;
            while (element) {
             if (element.tagName == "BODY") {
              const xScroll = element.scrollLeft || document.documentElement.scrollLeft;
              const yScroll = element.scrollTop || document.documentElement.scrollTop;
              xPos += (element.offsetLeft - xScroll + element.clientLeft);
              yPos += (element.offsetTop - yScroll + element.clientTop);
             } 
             else {
              xPos += (element.offsetLeft - element.scrollLeft + element.clientLeft);
              yPos += (element.offsetTop - element.scrollTop + element.clientTop);
             }
             element = element.offsetParent;
            }
            return { x: xPos, y: yPos };
        }
    }

    photo();

.gif__portfolio__inner {
    overflow: hidden;
    position: relative;
}

.gif__photo {
    position: absolute;
    z-index: 100000000000;
    transition: left .1s ease-in, top .1s ease-in;
    opacity: 0;
    border-radius: 100%;
}

.gif__photo.active {
    transition: 1s;
    opacity: 1;
}

<div class="gif__portfolio__inner">
        <div class="giv__photo__block">
            <img src="img/gif/photo-2.png" alt="" class="gif__photo gif__photo__one">
            <img src="img/gif/photo-2.png" alt="" class="gif__photo gif__photo__two">
            <img src="img/gif/photo-3.png" alt="" class="gif__photo gif__photo__three">
            <img src="img/gif/photo-4.png" alt="" class="gif__photo gif__photo__four">
            <img src="img/gif/photo-5.png" alt="" class="gif__photo gif__photo__five">
            <img src="img/gif/photo-6.png" alt="" class="gif__photo gif__photo__six">
            <img src="img/gif/photo-7.png" alt="" class="gif__photo gif__photo__seven">
            <img src="img/gif/photo-8.png" alt="" class="gif__photo gif__photo__eight">
        </div>
</div>

Answer 1

Something like this where the "pointer" is moving together with the cursor. So, in this example the "pointer" will show up when you hover any <a> element.

var pointer = document.getElementById('pointer');
var main = document.querySelector('main');

main.addEventListener('mousemove', e => {
  pointer.style.transform = `translate(${e.clientX-20}px, ${e.clientY-20}px)`;
});

main.addEventListener('mouseover', e => {
  if(e.target.closest('A')){
    pointer.classList.add('link');
  }
});

main.addEventListener('mouseout', e => {
  if(e.target.closest('A')){
    pointer.classList.remove('link');
  }
});

main {
  display: flex;
}

#pointer {
  width: 40px;
  height: 40px;
  background-color: silver;
  position: fixed;
  left: 0;
  top: 0;
  pointer-events: none;
  display: none;
  clip-path: circle(20px at center);
}

#pointer.link {
  display: block;
  background-image: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGxpbmUgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSI1IiB4MT0iMjAiIHkxPSI4MCIgeDI9IjgwIiB5Mj0iMjAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgLz4KPGxpbmUgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSI1IiB4MT0iNjAiIHkxPSIyMCIgeDI9IjgwIiB5Mj0iMjAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgLz4KCjxsaW5lIHN0cm9rZT0iYmxhY2siIHN0cm9rZS13aWR0aD0iNSIgeDE9IjgwIiB5MT0iNDAiIHgyPSI4MCIgeTI9IjIwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIC8+Cjwvc3ZnPg==');
}

<main>
  <div id="pointer"></div>
  <div>
    <a href="#">
      <img src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8IS0tIFNpbXBsZSByZWN0YW5nbGUgLS0+CiAgPHJlY3Qgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9ImdyYXkiIC8+CiAgPHRleHQgeD0iMTAiIHk9IjEwIiBmb250LXNpemU9IjEwIiBmaWxsPSJibGFjayI+VGVzdCBpbWFnZTwvdGV4dD4KPC9zdmc+"
        width="300" height="300">
    </a>
  </div>
  <div>
    <a href="#">
      <img src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8IS0tIFNpbXBsZSByZWN0YW5nbGUgLS0+CiAgPHJlY3Qgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9ImdyYXkiIC8+CiAgPHRleHQgeD0iMTAiIHk9IjEwIiBmb250LXNpemU9IjEwIiBmaWxsPSJibGFjayI+VGVzdCBpbWFnZTwvdGV4dD4KPC9zdmc+"
        width="300" height="300">
    </a>
  </div>
</main>