B02B · Hotspots על תמונה עם רשימה מסונכרנת

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}
.ph{display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;border-radius:var(--r, 14px)}
.ph-c{background:linear-gradient(160deg,#0b7285,#3bc9db)}

/* B02B · Hotspots על תמונה עם רשימה מסונכרנת */
.hs-wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:var(--gap, clamp(16px, 1.6vw, 36px));padding-inline:var(--gutter, clamp(24px, 5vw, 96px));align-items:start}
.hs-img{position:relative;aspect-ratio:4/3;border-radius:var(--r, 14px);font-size:20px}
.hs-dot{position:absolute;width:34px;height:34px;border-radius:50%;background:#f4c660;color:var(--ink, #16182b);font-weight:800;display:flex;align-items:center;justify-content:center;cursor:pointer;border:3px solid #fff;box-shadow:0 4px 14px rgba(0,0,0,.25);transition:transform .2s;opacity:0;scale:.3}
.hs-dot:hover{transform:scale(1.15)}
.hs-tip{position:absolute;bottom:130%;inset-inline-start:50%;translate:50% 0;background:var(--ink, #16182b);color:var(--bg, #f7f7fa);font-size:13px;padding:8px 14px;border-radius:8px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s}
.hs-dot:hover .hs-tip{opacity:1}
.hs-list{display:flex;flex-direction:column;gap:10px}
.hs-row{display:flex;gap:12px;align-items:center;background:var(--card, #fff);border:1px solid var(--line, #e4e4ee);border-radius:12px;padding:14px 18px;transition:border-color .2s,background .2s}
.hs-row.on{border-color:#f4c660;background:#fffaf0}
.hs-row b{width:28px;height:28px;border-radius:50%;background:#f4c660;color:var(--ink, #16182b);display:flex;align-items:center;justify-content:center;font-size:14px;flex:none}
@media(max-width:767px){.hs-wrap{grid-template-columns:1fr}.hs-dot{display:none}}

HTML

<div class="stage tight"><div class="hs-wrap">
<div class="hs-img ph ph-c">תמונת הנכס
  <div class="hs-dot" data-i="1" style="top:24%;inset-inline-start:30%">1<span class="hs-tip">מטבח מרווח עם אי</span></div>
  <div class="hs-dot" data-i="2" style="top:56%;inset-inline-start:62%">2<span class="hs-tip">סלון עם יציאה למרפסת</span></div>
  <div class="hs-dot" data-i="3" style="top:74%;inset-inline-start:22%">3<span class="hs-tip">חדר שינה ראשי</span></div>
</div>
<div class="hs-list">
  <div class="hs-row" data-i="1"><b>1</b>מטבח מרווח עם אי</div>
  <div class="hs-row" data-i="2"><b>2</b>סלון עם יציאה למרפסת</div>
  <div class="hs-row" data-i="3"><b>3</b>חדר שינה ראשי</div>
</div>
</div></div>

JS

gsap.registerPlugin(ScrollTrigger);

gsap.to(".hs-dot",{opacity:1,scale:1,ease:"back.out(2.4)",duration:.5,stagger:.12,
  scrollTrigger:{trigger:".hs-img",start:"top 70%"}});
function sync(i,on){
  document.querySelectorAll('[data-i="'+i+'"]').forEach(el=>{
    if(el.classList.contains("hs-row"))el.classList.toggle("on",on);
    else el.style.transform=on?"scale(1.15)":"";
  });
}
document.querySelectorAll("[data-i]").forEach(el=>{
  el.addEventListener("mouseenter",()=>sync(el.dataset.i,true));
  el.addEventListener("mouseleave",()=>sync(el.dataset.i,false));
});