hover-state-systems

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

1. Hover state same as default (no signal)
2. Aggressive scaling (1.1+) — looks busy
3. Long durations (>300ms) — feels slow
4. Color shifts to unrelated brand colors
5. Heavy shadows on hover (overdesigned)

Where this fits in the X3 empire

Hover state system for CardPrepAI components.