I wanted to add a little spice to the hover states of my navigation and found a nice technique to animate a gradient, giving the impression that a background color will fill from left to right.
First, on the hyperlink, specify the following style declarations:
- background: linear-gradient(to left, {original color} 50%, {fill color}, 50%); // specify the gradient
- background-size: 200% 100%; // set the background size to 2 times larger than the elements width
- background-position: right bottom; // default to the original background color
- transition: background, .25s, ease-out; // specify the background as the property for the transition, along with the effect duration and speed curve
For the hover state, specify the following style declaration:
- background-position: left bottom;
Putting it altogether:
| <style> | |
| .encapsulated li{ | |
| font-size: 16px; | |
| text-transform: uppercase; | |
| margin: 0; | |
| letter-spacing: .04em; | |
| line-height: 72px; | |
| list-style-type: none; | |
| border-bottom: solid 1px #0c445d; | |
| } | |
| .encapsulated a{ | |
| display: block; | |
| color: #1fb9ef; | |
| padding: 0 0.846em; | |
| background: linear-gradient(to left, #093447 50%, #072634 50%); | |
| background-size: 200% 100%; | |
| background-position: right bottom; | |
| transition: background .25s ease-out; | |
| } | |
| .encapsulated a:hover{ | |
| background-position: left bottom; | |
| } | |
| </style> | |
| <div class="encapsulated"> | |
| <ul> | |
| <li><a href="/">Home</a></li> | |
| <li><a href="work">Work</a><li> | |
| <li><a href="blog">Blog</a></li> | |
| <li><a href="contact">Contact</a></li> | |
| </ul> | |
| </div> |