Всплывающие изображения

<script src='https://unpkg.co/gsap@3/dist/gsap.min.js'></script><script  src="./script.js"></script>
<script>
    jQuery('<div>', {class: 'img-wrapper',}).appendTo('.t-body');
    jQuery('<div>', {class: 'img-placeholder',}).appendTo('.img-wrapper');
    jQuery('<img>', {class: 'img-inside',}).appendTo('.img-placeholder');
    $(".img-inside").attr('src', 'https://static.tildacdn.com/tild6137-6338-4364-b564-383635323030/simone-hutsch-xlGKy9.jpg');
    $('.uc-img-wrapper a').addClass('img-hover-effect-link');
</script>

<script>
    $('.uc-img-wrapper .link-image-1 a').addClass('imageblock-1 hover-img');
    $('.uc-img-wrapper .link-image-2 a').addClass('imageblock-2 hover-img');
    $('.uc-img-wrapper .link-image-3 a').addClass('imageblock-3 hover-img');
    $('.uc-img-wrapper .link-image-4 a').addClass('imageblock-4 hover-img');
    $('.uc-img-wrapper .link-image-5 a').addClass('imageblock-5 hover-img');
    $('.uc-img-wrapper .link-image-6 a').addClass('imageblock-6 hover-img');
    $('.uc-img-wrapper .link-image-7 a').addClass('imageblock-7 hover-img');
    $('.uc-img-wrapper .link-image-8 a').addClass('imageblock-8 hover-img');
    $('.uc-img-wrapper .link-image-9 a').addClass('imageblock-9 hover-img');
    $('.uc-img-wrapper .link-image-10 a').addClass('imageblock-10 hover-img');
    $('.uc-img-wrapper .link-image-11 a').addClass('imageblock-11 hover-img');
    $('.uc-img-wrapper .link-image-12 a').addClass('imageblock-12 hover-img');
    $('.uc-img-wrapper .link-image-13 a').addClass('imageblock-13 hover-img');
    $('.uc-img-wrapper .link-image-14 a').addClass('imageblock-14 hover-img');
    $('.uc-img-wrapper .link-image-15 a').addClass('imageblock-15 hover-img');
    $('.uc-img-wrapper .link-image-16 a').addClass('imageblock-16 hover-img');
    $('.uc-img-wrapper .link-image-17 a').addClass('imageblock-17 hover-img');
    $('.uc-img-wrapper .link-image-18 a').addClass('imageblock-18 hover-img');
    $('.uc-img-wrapper .link-image-19 a').addClass('imageblock-19 hover-img');
    $('.uc-img-wrapper .link-image-20 a').addClass('imageblock-20 hover-img');
</script>


<script>
    let imgHoverLink = gsap.utils.toArray(".hover-img");
let imgWrap = document.querySelector('.img-wrapper');
let imgItem = document.querySelector('.img-placeholder img');

function moveImg(e){
  let mouseX = e.clientX;
  let mouseY = e.clientY;
  let tl = gsap.timeline();
  tl.to(imgWrap,{
    duration: 1,
    x: mouseX,
    y: mouseY,
    ease: Expo.ease
  })
}

function linkHover(e){
  if (e.type == "mouseenter"){
    let imgSrc = e.target.dataset.src;
    let tl = gsap.timeline();
    
    tl.set(imgItem, {
      attr: { src : imgSrc} 
    }).to(imgWrap, {
      autoAlpha: 1,
      scale: 1,
    })
  }
  
  if (e.type == "mouseleave"){
    let tl = gsap.timeline();
    tl.to(imgWrap, {
      autoAlpha: 0,
      scale: 0,
    })
  }
}

function initAnimation(){
  imgHoverLink.forEach((link)=> {
    link.addEventListener('mouseenter', linkHover);
    link.addEventListener('mouseleave', linkHover);
    link.addEventListener('mousemove', moveImg);
  })
}

function init(){
  initAnimation();
}

window.addEventListener("load", () => {
  init();
})
</script>

<style>

.img-wrapper {
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  width: var(--ImageWidth);
  height: var(--ImageHeight);
  border-radius: var(--BorderRadius);
  overflow: hidden;
  pointer-events: none;
  z-index: var(--ImageIndex);
  visibility: hidden;
  transform: scale(0);
  margin-right: -50%;
  transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1); 
  transform: translate(-50%, -50%);
}


.hover-img {
    display: block;
    -webkit-text-stroke: var(--TextStroke);
}

.hover-img:hover {
    transition-duration: 0.7s;
    color: var(--LinkHover) !important;
    -webkit-text-stroke: var(--TextStrokeHover);
}



.img-placeholder, .img-placeholder img {
  height: 100%;
  width: 100%;
}

.img-placeholder img {
  object-fit: cover;
  display: block;
}
</style>

<!--Настройки изображений-->

<style>
    :root {
        --ImageWidth: 300px; /*Ширина изображения*/
        --ImageHeight: 300px; /*Высота изображения*/
        --BorderRadius: 100%; /*Скругление углов*/
        --LinkHover: #fff; /*Цвет ссылки при наведении*/
        --ImageIndex: 0; /*Позиционирование изображения. Значения "0" - за текстом, "10" перед текстом*/
        --TextStroke: 1px #fff; /*Размер и цвет обводки текста*/
        --TextStrokeHover: 1px #fff; /*Размер и цвет обводки текста при наведении*/
}
</style>



<!--Добавление изображений-->

<script>
    $(".uc-img-wrapper .imageblock-1").attr('data-src', 'https://static.tildacdn.com/tild3262-3737-4561-a436-613662333465/Frame_2.jpg');
    $(".uc-img-wrapper .imageblock-2").attr('data-src', 'https://static.tildacdn.com/tild3038-3730-4538-a539-366562316438/Frame_1.jpg');
    $(".uc-img-wrapper .imageblock-3").attr('data-src', 'https://static.tildacdn.com/tild6136-3836-4533-b661-616334616139/Frame_3.jpg');
</script>