How TO - Transition on Hover

Learn how to add transition on hover with CSS.

Transition on Hover

CSS transitions allows you to change property values smoothly (from one value to another), over a given duration.

Add a transition effect (opacity and background color) to a button on hover:

Fade in on hover:

Fade background on hover:

Go to our CSS Transition Tutorial to learn more about transitions.