Card expand to detail
Hover a card to see it scale up and reveal extra detail content with a smooth transition.
Quick implementation
/* Card with expandable detail on hover */
.card {
overflow: hidden;
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 0.4s ease;
}
.card:hover,
.card:focus-within {
transform: scale(1.08);
box-shadow: 0 12px 32px oklch(0 0 0 / 0.3);
z-index: 1;
}
/* Hidden detail revealed on hover */
.card-detail {
max-height: 0;
overflow: hidden;
opacity: 0;
transition: max-height 0.4s ease,
opacity 0.3s ease 0.1s;
}
.card:hover .card-detail,
.card:focus-within .card-detail {
max-height: 8rem;
opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
.card,
.card-detail {
transition-duration: 0.01s;
}
}Prompt this to your LLM
Includes role, constraints, two framework variants, and edge cases to handle.
You are a senior frontend engineer building interactive card components.
Goal: A card that scales up on hover and reveals additional detail content with a smooth expand animation.
Technical constraints:
- Use transform: scale() for the hover lift — it's compositor-only and doesn't trigger layout.
- Reveal extra content via max-height + opacity transition for a fade-expand effect.
- Use cubic-bezier(0.4, 0, 0.2, 1) for a natural deceleration curve.
- Use oklch() for all color values — no hex or rgba().
- Include :focus-within so keyboard users trigger the expand.
Framework variant (pick one):
A) Vanilla HTML + CSS only.
B) React component — accept title, summary, and detail props, expand on hover/focus.
Edge cases to handle:
- Respect prefers-reduced-motion: reduce duration to near-instant.
- The expanded card must not overflow its container — use z-index to layer above siblings.
- Max-height transition timing feels off when content is much shorter than the max; consider interpolate-size if supported.
Return HTML + CSS.Why this matters in 2026
Card-to-detail expand patterns are standard in dashboards, e-commerce grids, and portfolio galleries. The combination of transform: scale() for the lift and max-height + opacity for the content reveal creates a polished interaction without JavaScript. With :focus-within, the same effect works for keyboard navigation, making it accessible by default.
The logic
transform: scale(1.08) on hover lifts the card visually without affecting layout — siblings stay put. The extra content starts at max-height: 0 and opacity: 0, then transitions to visible values on hover. A slight delay on the opacity (0.1s) staggers the fade-in after the expand begins, creating a more natural sequence. Adding z-index: 1 ensures the expanded card renders above its neighbors.
Accessibility & performance
transform and opacity are compositor-only properties — they don't trigger layout or paint. The max-height transition does trigger layout, but for a single card this is negligible. Include :focus-within alongside :hover for keyboard users, and gate all animations behind prefers-reduced-motion. Consider adding aria-expanded if the detail content is toggled by a button rather than hover.