Scale card interaction
Hover the padded frame: .scale-card-card eases to scale(1.03) while the shadow deepens—spec uses the duplicated “card” class name.
Design tokens
Shared radii, spacing, and motion tokens ship with this release.
Widely Supported
Quick implementation
.scale-card-card {
transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.28s ease;
}
.scale-card-demo:hover .scale-card-card {
transform: scale(1.03);
box-shadow: 0 18px 40px oklch(0.2 0.04 260 / 0.18);
}Prompt this to your LLM
Clickable grids.
You are adding a hover lift to a card.
Goal: scale to ~1.03 with a deeper diffuse shadow on hover; smooth transition.
Constraints:
- prefers-reduced-motion: no scale, keep base shadow.
- Transform + box-shadow only.
Return CSS.Why this matters in 2026
Scale-plus-shadow is the default “interactive tile” language across app stores and dashboards.
The logic
Matching transition timing on transform and shadow keeps the lift from feeling like two separate effects.
Accessibility & performance
Skip scale for reduced motion; ensure focus-visible styles for keyboard users.