Focus Cards — Free HTML CSS JS Hover Blur Grid Snippet

<div class="fc-grid" id="fcGrid">
  <article class="fc-card" tabindex="0" style="--bg:linear-gradient(150deg,#6366f1,#0a0a14)"><div class="fc-meta"><h3>Aurora</h3><p>Northern lights</p></div></article>
  <article class="fc-card" tabindex="0" style="--bg:linear-gradient(150deg,#ec4899,#0a0a14)"><div class="fc-meta"><h3>Ember</h3><p>Desert dusk</p></div></article>
  <article class="fc-card" tabindex="0" style="--bg:linear-gradient(150deg,#22d3ee,#0a0a14)"><div class="fc-meta"><h3>Tide</h3><p>Coastal calm</p></div></article>
  <article class="fc-card" tabindex="0" style="--bg:linear-gradient(150deg,#34d399,#0a0a14)"><div class="fc-meta"><h3>Fern</h3><p>Forest floor</p></div></article>
  <article class="fc-card" tabindex="0" style="--bg:linear-gradient(150deg,#f59e0b,#0a0a14)"><div class="fc-meta"><h3>Solstice</h3><p>Golden hour</p></div></article>
  <article class="fc-card" tabindex="0" style="--bg:linear-gradient(150deg,#a78bfa,#0a0a14)"><div class="fc-meta"><h3>Nebula</h3><p>Deep space</p></div></article>
</div>

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

.fc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;width:100%;max-width:760px}

.fc-card{position:relative;aspect-ratio:3/4;border-radius:16px;background:var(--bg);overflow:hidden;cursor:pointer;outline:none;transition:transform .4s ease,filter .4s ease,opacity .4s ease;display:flex;align-items:flex-end;padding:18px}
.fc-card::after{content:'';position:absolute;inset:0;background:rgba(10,10,20,.0);transition:background .4s ease}

/* When the grid is hovered, every card dims and blurs EXCEPT the hovered one,
   which lifts. The same applies on keyboard focus-within. */
.fc-grid:hover .fc-card,.fc-grid:focus-within .fc-card{filter:blur(2px) brightness(.6);transform:scale(.97);opacity:.8}
.fc-grid .fc-card:hover,.fc-grid .fc-card:focus-visible{filter:none;transform:scale(1.03);opacity:1;z-index:1;box-shadow:0 24px 50px -20px rgba(0,0,0,.7)}

.fc-meta{position:relative;z-index:1;transform:translateY(8px);opacity:0;transition:transform .4s ease,opacity .4s ease}
.fc-card:hover .fc-meta,.fc-card:focus-visible .fc-meta{transform:none;opacity:1}
.fc-meta h3{font-size:19px;font-weight:800}
.fc-meta p{font-size:12.5px;color:rgba(255,255,255,.75);margin-top:2px}

@media(max-width:560px){.fc-grid{grid-template-columns:repeat(2,1fr)}}

// The dim-others / focus-one behaviour is pure CSS via :hover and :focus-within.
// JS only adds a click selection state so the pattern works on touch, where
// there is no hover — tapping a card focuses it and reveals its caption.
var grid = document.getElementById('fcGrid');
var cards = Array.prototype.slice.call(grid.querySelectorAll('.fc-card'));

cards.forEach(function (card) {
  card.addEventListener('click', function () {
    card.focus();
  });
  card.addEventListener('keydown', function (e) {
    if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); card.focus(); }
  });
});

// Tapping empty grid space (or pressing Escape) clears the focus on touch.
grid.addEventListener('click', function (e) {
  if (e.target === grid && document.activeElement) document.activeElement.blur();
});
document.addEventListener('keydown', function (e) {
  if (e.key === 'Escape' && document.activeElement) document.activeElement.blur();
});