Card Hover Effects

Demo Info

Demo Information

8intermediate

Create interactive card hover effects using backdrop-filter transitions.

Key Concepts

Card hover states
Multi-filter transitions
Creating engaging interactions

Technical Details

.card {
  backdrop-filter: blur(10px) brightness(0.9);
  transition: backdrop-filter 0.3s;
}
.card:hover {
  backdrop-filter: blur(20px) brightness(1.2);
}

← Back to Intermediate Examples

Found a bug or want to contribute? Check out the GitHub repo

Card Hover Effects

Blur on Hover

Card Title

Blur increases when hovering over this card

Brightness on Hover

Card Title

Background brightens on hover

Saturate on Hover

Card Title

Colors become more vibrant

Complex Hover Effect

Card Title

Multiple filters change on hover