Midterm: WordPress MockUp Exercise Solution Part Five: Transitions

When the user hovers over an icon font, the color of the icon is supposed to change (preferably to a thematically related color, such as the red color we’ve used for the widget titles or the photo accent border).

To do this takes only a few lines of CSS:

 .nav-social a { 
color: black; transition: color .5s; 

.nav-social a:hover { 
color: indianred; 

The key here is that we put the transition on the non-hover state. This means that the change will occur when the hover occurs and when it ends. Try this out on other interface elements on the page.