Feature card grid with background zoom

3-card row where each card has a background image, gradient overlay, and a slow zoom on hover. Apple-product-page feel.

Layouts Captured JS-free

Use when — you have 3 distinct value propositions or service categories to feature side-by-side, each with strong imagery. Restaurants, hotels, agencies, service businesses. Bad for content-heavy lists (use a plain card grid instead).

Live demo

Specialty ★

Hand-built

Each project gets the dedicated team, never a junior squad.

Speed ⚡

Fast preview

First visible result within the first week — often sooner.

Local ◆

Direct line

Talk to the people building it, not to an account manager.

The two key hover moves

.feat-card:hover { transform: translate3d(0, -6px, 0); box-shadow: /* deeper */; }
.feat-card:hover .feat-card__bg { transform: scale(1.08); }
.feat-card:hover .feat-card__icon { transform: translate3d(0, -4px, 0) scale(1.08); }

The card lifts (sets up the eye), the background zooms inside it (cinematic), and the icon bumps up (subtle but satisfying). The icon transition uses a spring easing (cubic-bezier(0.34, 1.56, 0.64, 1)) for the gentle overshoot.

Layered shadows — Apple-style

--shadow-card: 0 1px 0 rgba(255,255,255,0.6) inset,
               0 6px 16px rgba(20,20,20,0.08),
               0 24px 40px -16px rgba(20,20,20,0.18);
--shadow-card-hover: 0 1px 0 rgba(255,255,255,0.7) inset,
                     0 12px 28px rgba(20,20,20,0.12),
                     0 40px 60px -20px rgba(20,20,20,0.28);

The trick: two outer shadows + one inset highlight. The inset white at top adds the subtle edge-light that makes the card feel "lifted." Single big shadows look flat by comparison.

Variants worth considering

Tag pill at the top — small uppercase category chip, glassmorphism background. Sets the "shelf" for each card.

Icon over title — large icon with subtle drop-shadow above the title gives the card a clear focal point.

Stagger reveal — combine with the reveal-on-scroll pattern + 100ms stagger delays so the three cards pop in sequence.

Source: Chevy 55 landing page features section (user-uploaded HTML, 2026-05-18).