G11 · זכוכית מגדלת על תמונה

CSS

/* מחלקות עזר של המאגר שהרכיב הזה משתמש בהן */
.stage{padding:var(--sec, clamp(120px, 12vw, 260px)) var(--gutter, clamp(24px, 5vw, 96px));position:relative}
.stage.tight{padding-block:clamp(48px,5vw,90px)}
.stage.full{padding-inline:0}

/* G11 · זכוכית מגדלת על תמונה */
.mag-wrap{position:relative;width:min(640px,86vw);margin-inline:auto}
.mag-img{width:100%;aspect-ratio:16/10;border-radius:var(--r, 14px);background:
  radial-gradient(circle at 25% 30%,#ffd43b 0 8%,transparent 8%),
  radial-gradient(circle at 70% 60%,#ff8787 0 12%,transparent 12%),
  radial-gradient(circle at 45% 75%,#66d9e8 0 6%,transparent 6%),
  linear-gradient(160deg,#1b2653,#3b5bdb)}
.magnifier{position:absolute;pointer-events:none;width:190px;height:190px;border-radius:50%;
  border:2px solid #fff;background-repeat:no-repeat;transform:translate(-50%,-50%) scale(0);
  transition:transform .25s ease;z-index:5;box-shadow:0 10px 30px rgba(0,0,0,.3)}

HTML

<div class="stage tight"><div class="mag-wrap"><div class="mag-img"></div></div></div>

JS

const zoom=1.5,wrap=document.querySelector(".mag-wrap"),img=document.querySelector(".mag-img");
const mag=document.createElement("div");mag.className="magnifier";wrap.appendChild(mag);
function paint(){
  const w=img.offsetWidth,h=img.offsetHeight;
  mag.style.backgroundImage=getComputedStyle(img).backgroundImage;
  mag.style.backgroundSize=(w*zoom)+"px "+(h*zoom)+"px";
}
paint();addEventListener("resize",paint);
wrap.addEventListener("mouseenter",()=>mag.style.transform="translate(-50%,-50%) scale(1)");
wrap.addEventListener("mousemove",e=>{
  const r=img.getBoundingClientRect(),x=e.clientX-r.left,y=e.clientY-r.top;
  mag.style.left=x+"px";mag.style.top=y+"px";
  mag.style.backgroundPosition=(-x*zoom+mag.offsetWidth/2)+"px "+(-y*zoom+mag.offsetHeight/2)+"px";
});
wrap.addEventListener("mouseleave",()=>mag.style.transform="translate(-50%,-50%) scale(0)");