Card Grid Hover Focus Dim — Sibling Blur Snippet

<div class="fd-stage">
  <p class="fd-hint">Hover any card — the rest of the grid dims and blurs slightly to focus attention</p>
  <div class="fd-grid" id="fdGrid">
    <div class="fd-card"><span class="fd-icon">⚡</span><h3>Fast by default</h3><p>Sub-100ms responses across every region.</p></div>
    <div class="fd-card"><span class="fd-icon">🔒</span><h3>Secure at rest</h3><p>AES-256 encryption on every stored byte.</p></div>
    <div class="fd-card"><span class="fd-icon">📈</span><h3>Scales with you</h3><p>From ten users to ten million, no rewrite.</p></div>
    <div class="fd-card"><span class="fd-icon">🧩</span><h3>Composable</h3><p>Small primitives that combine into anything.</p></div>
    <div class="fd-card"><span class="fd-icon">🌍</span><h3>Global edge</h3><p>Deployed to 34 regions out of the box.</p></div>
    <div class="fd-card"><span class="fd-icon">🛠️</span><h3>Open API</h3><p>Every feature is available as a typed endpoint.</p></div>
  </div>
</div>

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, sans-serif; background: #0a0e17; display: flex; align-items: center; justify-content: center; min-height: 100vh; }

.fd-stage { display: flex; flex-direction: column; align-items: center; gap: 26px; padding: 24px; }
.fd-hint { font-size: 13px; color: #64748b; text-align: center; max-width: 380px; }

.fd-grid {
  display: grid;
  grid-template-columns: repeat(3, 180px);
  gap: 16px;
}
@media (max-width: 640px) { .fd-grid { grid-template-columns: repeat(2, 1fr); } }

.fd-card {
  padding: 20px 18px;
  border-radius: 16px;
  background: #121826;
  border: 1px solid #1f2937;
  transition: opacity 0.3s ease, filter 0.3s ease, transform 0.3s cubic-bezier(0.4,0,0.2,1), border-color 0.3s;
  cursor: default;
}
.fd-icon { font-size: 22px; display: block; margin-bottom: 10px; }
.fd-card h3 { font-size: 14.5px; font-weight: 700; color: #f1f5f9; margin-bottom: 6px; }
.fd-card p { font-size: 12.5px; color: #8b93a7; line-height: 1.5; }

/* Applied via JS to every card except the one currently hovered. */
.fd-grid.fd-active .fd-card:not(.fd-focused) {
  opacity: 0.4;
  filter: blur(1.5px) saturate(0.7);
  transform: scale(0.97);
}
.fd-grid.fd-active .fd-focused {
  border-color: #6366f1;
  transform: scale(1.035);
  box-shadow: 0 16px 40px -12px rgba(99,102,241,0.35);
}

// Hovering one card in the grid dims, desaturates, and slightly blurs every
// OTHER card via a shared parent class plus a per-card focused marker, so the
// grid reads as one connected group reacting to attention rather than each
// card having an isolated, independent :hover state.
var grid = document.getElementById('fdGrid');
var cards = Array.prototype.slice.call(grid.querySelectorAll('.fd-card'));

cards.forEach(function (card) {
  card.addEventListener('mouseenter', function () {
    grid.classList.add('fd-active');
    cards.forEach(function (c) { c.classList.toggle('fd-focused', c === card); });
  });
});

grid.addEventListener('mouseleave', function () {
  grid.classList.remove('fd-active');
  cards.forEach(function (c) { c.classList.remove('fd-focused'); });
});