Hover Transition Patterns

Hover Transitions

Hover transitions are the most common use case. Define base styles on the element and changed styles on :hover. The transition runs both ways automatically.

Example

.nav-link {
  color: #555;
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
  padding-bottom: 4px;
}

.nav-link:hover {
  color: #007bff;
  border-bottom-color: #007bff;
}

CSS

Full Editor

Pro Tip

Transitions reverse automatically when the trigger state is removed — no need to define the reverse transition separately.

Related Resources

CSS Reference

Complete tag & property list

CSS How-To Guides

Step-by-step practical guides

CSS Exercises

Practice what you've learned