Each box above is an anchor tag with a
linear-gradient. On hover, the
background-position changes to reveal the second half of the link’s gradient.
Creating the gradient
I created an even gradient for each link where the lighter color ends at 50% and the darker color starts at 50%. The gradient doesn’t repeat, but it’s twice it’s size on either the x or y axis. For example, the up (↑) link has
background-size: 100% 200%. Unless I change the
background-position, then the second half of the gradient will stay hidden because it’s clipped by the size of the element.
The demo above illustrates:
- The actual size of the gradient.
- The size of the element clips the gradient to reveal the first half of the gradient.
- Changing the
background-positionpulls the second half of the gradient into view.
On hover, I set the
background-position to move 100% on the same axis that I doubled in size. For the up (↑) link, the rule is
background-position: 0 100%;. The new position paired with a
transition pulls the second half of the gradient into view.
Did you notice the lip of the darker gradient peaking in? The lip is adjustable on
$start. Try changing the value. If the variable is 0, then the lip of the second half of the gradient disappears.
I love the sliding between the left (←) and right (→) links. It looks like they are both tugging at the same rectangle. I’ll have to hold onto this idea.