Spotlight Hover Cards

<div class="spot-grid" id="spotGrid">
  <div class="spot"><h4>Fast</h4><p>Blazing performance out of the box.</p></div>
  <div class="spot"><h4>Secure</h4><p>Encrypted end to end by default.</p></div>
  <div class="spot"><h4>Simple</h4><p>Set up in minutes, not days.</p></div>
</div>

body{background:#0d1426}
.spot-grid{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;max-width:480px}
.spot{position:relative;width:150px;padding:22px;border-radius:16px;background:#121a2e;border:1px solid #233052;color:#fff;font-family:system-ui,sans-serif;overflow:hidden}
.spot::before{content:'';position:absolute;width:200px;height:200px;background:radial-gradient(circle,rgba(255,71,126,.4),transparent 60%);left:var(--x,-100px);top:var(--y,-100px);transform:translate(-50%,-50%);opacity:0;transition:opacity .3s;pointer-events:none}
.spot:hover::before{opacity:1}
.spot h4{margin:0 0 8px;position:relative}
.spot p{margin:0;font-size:13px;color:#9fb0d0;line-height:1.5;position:relative}

document.querySelectorAll('.spot').forEach(function(c){c.addEventListener('mousemove',function(e){var r=c.getBoundingClientRect();c.style.setProperty('--x',(e.clientX-r.left)+'px');c.style.setProperty('--y',(e.clientY-r.top)+'px')})});