CSS Hover Fade-In Text with Modern CSS (2026)

Fade-in text on hover is a staple of modern card and gallery design. In 2026 you don't need JavaScript or keyframe hacks for the basics — a transition on opacity does the job, and :has() unlocks fancier patterns. Here are the recipes.

1. Basic fade-in on hover

Text hidden by default, fades in when you hover the card:

.card .overlay-text {
  opacity: 0;
  transition: opacity 0.35s ease;
}
.card:hover .overlay-text {
  opacity: 1;
}

2. Fade + slight rise

Adding a tiny translate makes it feel premium:

.card .overlay-text {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.card:hover .overlay-text {
  opacity: 1;
  transform: translateY(0);
}

3. Fade out siblings with :has()

Dim everything except the hovered card — now supported in all modern browsers:

.grid:has(.card:hover) .card:not(:hover) {
  opacity: 0.45;
}
.card { transition: opacity 0.3s ease; }

Respecting reduced motion

@media (prefers-reduced-motion: reduce) {
  .card .overlay-text { transition: none; }
}

Conclusion

Opacity transitions cover 90% of hover-fade needs; :has() handles the rest. Keep durations around 0.3s, ease them, and always design for the no-hover case first.