css

How to Create a CSS Card Hover Effect

Add smooth hover animations to cards with CSS transitions.

Card hover effects make UI feel interactive and polished. Use transition and transform to animate.

Common Effects

Lift — translate Y and add box-shadow
Scale — slightly enlarge the card
Border glow — change border color or add box-shadow

Performance Tip

Always animate transform and opacity — these are GPU-composited and do not cause layout reflows.

Example

.card {
  background: #fff;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

Try It Yourself

How to Center a Div

How to Create a CSS Gradient Button