How to add hover transition effects

Learn how to add hover transition effects with CSS.

Hover transition

CSS transition allows you to smoothly change the attribute values over a given duration (from one value to another).

Add a transition effect (opacity and background color) to the button when the mouse hovers:

Esimerkki

Mouse hover to fade in:

Kokeile itse

Esimerkki

Riippuvuus hiiren osoittimella taustan peittymistä:

Kokeile itse

Liittyvät sivut

Oppitunti:CSS siirtymä