Focus cards are the grid interaction where hovering any one card sharpens and lifts it while every other card blurs and dims — pulling all attention to the one you're pointing at. It's a striking way to present a gallery, a team, or a set of features. This snippet builds it with plain HTML and CSS for the core effect, plus a little vanilla JavaScript to make it work on touch and keyboard.

The "dim the siblings" trick

The clever part is achieved entirely with CSS selector scoping. When the grid container is hovered (.fc-grid:hover), a rule blurs, darkens, and slightly shrinks every .fc-card inside it. A second, more specific rule then targets only the card actually under the cursor (.fc-card:hover) and restores it to full sharpness, scales it up, and raises its z-index and shadow. Because the hovered-card rule wins on specificity over the all-cards rule, the net effect is: everything dims except the one you're on. No JavaScript decides which card is active — the cascade does.

Captions that reveal on focus

Each card hides its title and subtitle by default at opacity: 0 and a slight downward offset. Only the focused card's .fc-meta transitions up and in, so the label appears precisely on the card you're attending to. This keeps the grid clean at rest — just colorful tiles — and surfaces information contextually, which is both elegant and reduces visual noise.

Keyboard accessibility with focus-within

The same effect is wired to keyboard navigation. Every card has tabindex="0", and the dimming rules also trigger on .fc-grid:focus-within, with the active styles applying on :focus-visible. So tabbing through the cards produces the identical blur-others-highlight-one behavior, and the caption reveals on the focused card. This means the interaction isn't mouse-only — it's fully operable from the keyboard, with the focus ring replaced by the lift-and-sharpen treatment.

Making it work on touch

Touch devices have no hover, so the JavaScript bridges the gap: tapping a card calls focus() on it, which triggers the :focus-within and :focus-visible rules and produces the same effect as hovering. Tapping empty grid space or pressing Escape blurs the active element to reset. Enter and Space also focus a card for keyboard activation. This small script is what makes the pattern usable on phones, where the pure-CSS hover version would otherwise do nothing.

Theming with a CSS variable

Each card's background is set through a --bg custom property inline, so the six gradients are data, not separate rules. Swap these for real images by setting --bg to a url() or replacing the background with an <img> — the focus logic is independent of the card's content.

Customizing it

Tune the blur(2px) and brightness(.6) for a stronger or subtler dimming, adjust the scale values for more or less lift, change the grid columns, or speed up the .4s transitions. The grid drops from three to two columns under 560px. Pair it with a pin card feature or a testimonial wall for a rich, interactive page.

Build with AI

Build, Understand, Optimize, and Extend It With AI

You don't have to reason through the CSS specificity trick on your own. Paste this snippet's HTML, CSS, and JS into an AI coding assistant like Claude and ask it to explain exactly why the grid-hover rule and the card-hover rule can coexist without a JavaScript-managed active class, and why the JS only calls card.focus() on click instead of also managing a selected class itself. The same assistant can help optimize it — ask whether the blur and brightness filter combination on every non-hovered card is expensive to repaint on a large grid, or whether the touch-focus bridging logic has any gaps on devices that support both touch and hover (like some laptops). It's also useful for extending the pattern: have it add a caption that includes a call-to-action link revealed only on the focused card, support a keyboard arrow-key navigation model between cards instead of only Tab, or swap the CSS gradients for lazy-loaded real images without breaking the focus/dim logic. Treat the code less like a finished artifact and more like a starting point for a conversation.

Prompt to recreate it

Copy this into your AI assistant of choice to build the effect from scratch, or as a jumping-off point for your own variant:

text

Build a "focus cards" grid in plain HTML, CSS, and JavaScript where hovering or focusing one card sharpens it while every other card blurs and dims — the sibling-dimming behavior must come from CSS selectors and specificity alone, not from JavaScript tracking which card is active.

Requirements:
- A CSS grid of at least six cards, each themed via its own CSS custom property holding a background gradient, each containing a hidden title and subtitle that are positioned at the bottom of the card.
- Write one CSS rule scoped to the grid container's hover state that applies a blur filter, a brightness reduction, and a slight scale-down to every card inside it. Write a second, more specific CSS rule scoped to an individual card's own hover state that removes the blur, restores brightness, scales the card up slightly above 1, and raises it above its siblings with z-index and a stronger shadow — the second rule must win purely through selector specificity, with no class ever added or removed by JavaScript to mark an "active" card.
- Mirror the exact same behavior for keyboard users: the grid-level dimming rule must also apply when the grid container matches a focus-within state, and the single-card sharpening rule must apply when that specific card matches a focus-visible state — so tabbing through cards reproduces the identical effect as mouse hover.
- Each card's caption must be hidden (offset downward and transparent) by default and animate into view only on that same card's hover/focus-visible state.
- Since touch devices have no hover state at all, write JavaScript that makes every card focusable (tabindex 0), calls .focus() on a card when it's tapped or when Enter/Space is pressed on it, and clears focus (blurring the active element) when empty grid space is tapped or when Escape is pressed anywhere on the page — this JS must only move DOM focus, never add or remove any visual-state class itself.
- Make the grid responsive, dropping from three columns to two below a reasonable mobile breakpoint.

Want to tighten it up first? Run this prompt through the AI Prompt Studio to score it across 8 quality dimensions, catch anti-patterns, and tune the wording for Claude, ChatGPT, or Gemini before you paste it in.

Step by step

How to Use

1
Paste HTML, CSS, and JSA grid of six colorful cards renders evenly.
2
Hover any cardIt sharpens and lifts while the others blur and dim.
3
See the captionThe focused card reveals its title and subtitle.
4
Tab through themKeyboard focus produces the same blur-others effect.
5
Tap on mobileTapping a card focuses it; tap empty space to reset.
6
Swap in imagesSet each card's --bg to a real image.

Real-world uses

Common Use Cases

Image galleries

An Instagram-style alternative to a photo gallery.

Team sections

Highlight one team card at a time.

Feature grids

Draw focus across a feature cards layout.

Portfolio work

Pair with a portfolio hero.

Product collections

Spotlight items beside a pin card.

Hover effect demos

A reference for specificity-based sibling dimming.

Got questions?

Frequently Asked Questions

It's pure CSS specificity. A rule on .fc-grid:hover .fc-card blurs and dims every card when the grid is hovered. A more specific rule on .fc-card:hover then restores the single card under the cursor to full sharpness and scales it up. Because the hovered-card rule outranks the all-cards rule, everything dims except the one you point at — no JavaScript picks the active card.

Yes. Every card has tabindex=0, and the dimming rules also fire on .fc-grid:focus-within with the active styles on :focus-visible. Tabbing through the cards produces the same blur-others, highlight-one behavior and reveals the focused card's caption, so the interaction is fully keyboard-operable rather than mouse-only.

The JavaScript bridges that gap. Tapping a card calls focus() on it, which triggers the focus-within and focus-visible rules and reproduces the hover effect. Tapping empty grid space or pressing Escape blurs the active element to reset, and Enter or Space also focuses a card. Without this, the CSS-only hover version would do nothing on phones.

Yes. Each card's background is set via a --bg custom property inline, so the gradients are just data. Replace --bg with a url() image, or swap the background for an <img> element inside the card. The focus, blur, and caption logic is independent of what fills the card.

Render the cards from an array with their background and labels. The hover and focus-within CSS works unchanged. Add an onClick that focuses the card element via a ref for touch, plus an Escape handler in a mount effect with cleanup. In Tailwind, use group and peer or the has-[] and focus-within variants to express the dim-siblings behavior, with blur and scale utilities.

Loading…