Slidey background

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 remain hidden because it’s clipped by the size of the element.

The size of the element clips the gradient to reveal the first half of the gradient.

Changing the background-position pulls the second half of the gradient into view.

Hover

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.

Fat lip

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.

Thoughts

I love the sliding between the left (←) and right (→) links. It appears that they are both tugging at the same rectangle. I’ll have to hold onto this idea.