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

<!--Всплывающие изображения-->
<!--https://mt-webdesign.ru/image-pop-->
<script src='https://matilda-design.ru/library/GSAP.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', '');
$('.uc-img-wrapper').addClass('img-hover-effect-link');
$('.uc-img-wrapper .link-image-1').addClass('imageblock-1 hover-img');
$('.uc-img-wrapper .link-image-2').addClass('imageblock-2 hover-img');
$('.uc-img-wrapper .link-image-3').addClass('imageblock-3 hover-img');
$('.uc-img-wrapper .link-image-4').addClass('imageblock-4 hover-img');
$('.uc-img-wrapper .link-image-5').addClass('imageblock-5 hover-img');
$('.uc-img-wrapper .link-image-6').addClass('imageblock-6 hover-img');
$('.uc-img-wrapper .link-image-7').addClass('imageblock-7 hover-img');
$('.uc-img-wrapper .link-image-8').addClass('imageblock-8 hover-img');
$('.uc-img-wrapper .link-image-9').addClass('imageblock-9 hover-img');
$('.uc-img-wrapper .link-image-10').addClass('imageblock-10 hover-img');
$('.uc-img-wrapper .link-image-11').addClass('imageblock-11 hover-img');
$('.uc-img-wrapper .link-image-12').addClass('imageblock-12 hover-img');
$('.uc-img-wrapper .link-image-13').addClass('imageblock-13 hover-img');
$('.uc-img-wrapper .link-image-14').addClass('imageblock-14 hover-img');
$('.uc-img-wrapper .link-image-15').addClass('imageblock-15 hover-img');
$('.uc-img-wrapper .link-image-16').addClass('imageblock-16 hover-img');
$('.uc-img-wrapper .link-image-17').addClass('imageblock-17 hover-img');
$('.uc-img-wrapper .link-image-18').addClass('imageblock-18 hover-img');
$('.uc-img-wrapper .link-image-19').addClass('imageblock-19 hover-img');
$('.uc-img-wrapper .link-image-20').addClass('imageblock-20 hover-img');
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 {
-webkit-text-stroke: var(--TextStroke);
}
.hover-img:hover {
-webkit-text-stroke: var(--TextStrokeHover);
}
.hover-img .tn-atom {
transition-duration: 0.3s;
}
.hover-img:hover .tn-atom {
color: var(--LinkHover) !important;
}
.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: transparent; /*Цвет ссылки при наведении*/
--ImageIndex: 0; /*Позиционирование изображения. Значения "0" - за текстом, "10" перед текстом*/
--TextStroke: 1px #fff; /*Размер и цвет обводки текста*/
--TextStrokeHover: 1px red; /*Размер и цвет обводки текста при наведении*/
}
@media screen and (max-width: 480px) { /*Отключаем на мобиле*/
.img-placeholder {
display: none;
}
</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>