Card Focus: Premium Interactions Component by Detailed

On desktop, hovering a card scales it up and subtly blurs the surrounding cards, keeping the focus sharp. On mobile, the effect is scroll-driven: the card closest to the viewport center stays in focus while others fade back.

Each card supports an image, an optional logo, a title, and a text field - all customizable in position, alignment, color, and size. Cards can link to internal pages or external URLs.

Key Features:

Responsive (the cards automatically adjust to the device)
Staggered appear animation with adjustable duration and delay
Hover-to-focus effect with blur on non-hovered cards
Scroll-aware active state on mobile (no hover needed)
Logo/text overlay with configurable position (4 corners + center)
Optional background pill behind logo and text
Per-card link support with new tab option
Fully adjustable grid: gap, card size, aspect ratio, and border radius

Unlimited Premium Support – From Switzerland 🇨🇭

Still have questions before buying?

Reach out anytime at info@detailed.ch and we'll be happy to help. If needed, we can send you a walkthrough video so you know exactly what you're getting.

✦ Designed in Switzerland. Built for the world.