18 min read

Hover Effects and Transitions

Give links, buttons, cards and photos feedback with :hover, and smooth changes with transition and transform.

The :hover Pseudo-Class

:hover applies styles while the mouse is over an element. It tells visitors "this can be clicked". You have already used it for the navigation bar. :focus does the same for keyboard users.

A smooth colour changeCSS

1.button {2  background-color: #D9962B;3  transition: background-color 0.2s;4}5 6.button:hover {7  background-color: #C07F1B;8}

transition makes the change happen gradually instead of instantly — here over 0.2 seconds. Put the transition on the normal state, not the hover state, so it animates both in and out.

What the browser shows

Try it:

Hover over the button and the card. Change 0.2s to 1s to slow the animation down.

Practice

Where should the transition property go?

Smooth Changes with transition

A smooth colour changeCSS

1.button {2  background-color: #D9962B;3  transition: background-color 0.2s;4}5 6.button:hover {7  background-color: #C07F1B;8}

transition makes the change happen gradually instead of instantly — here over 0.2 seconds. Put the transition on the normal state, not the hover state, so it animates both in and out.

Moving and Growing with transform

What the browser shows

Try it:

Hover over the button and the card. Change 0.2s to 1s to slow the animation down.

Practice

Where should the transition property go?