| name | hover-state-systems |
| description | Use when designing hover states for interactive elements. Hover states confirm clickability and guide interaction.
|
Hover State Systems
Hover states: subtle background shift, color change, scale, or lift. <200ms transition. Confirm clickability without being noisy.
Hover patterns
| Element | Hover treatment |
|---|
| Button | Background darkens 10%, slight lift (-1px) |
| Link | Underline appears or thickens |
| Card | Subtle shadow lift + scale 1.01 |
| Image | Subtle zoom (scale 1.05), brightness +5% |
| Icon | Color shifts to brand accent |
| Row in table | Background shifts to dim |
CSS hover patterns
.btn:hover {
transform: translateY(-1px);
background-color: var(--accent-90);
transition: all 150ms ease-out;
}
.card:hover {
transform: translateY(-2px) scale(1.005);
box-shadow: 0 8px 24px rgba(0,0,0,0.1);
transition: all 200ms ease-out;
}
img:hover {
transform: scale(1.03);
filter: brightness(1.02);
transition: all 300ms ease-out;
}
Don't do
- Hover state same as default (no signal)
- Aggressive scaling (1.1+) — looks busy
- Long durations (>300ms) — feels slow
- Color shifts to unrelated brand colors
- Heavy shadows on hover (overdesigned)
Where this fits in the X3 empire
Hover state system for CardPrepAI components.
