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:
1 2 3 4 5 6 7 | .nav-social a { color: black; transition: color .5s; } .nav-social a:hover { color: #cd5c5c; } |
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.