CSS Public

Card Hover Lift

A small hover effect that lifts a card with transition and shadow.

#css #card #hover #ui

CSS

.hover-card {
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.08);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.hover-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14);
}

Notes

Keep hover effects subtle so the interface still feels stable.

Snippet actions

CodShot user

Updated: 2026-06-03 14:05

Public snippets

Forks