Slidey background

Each box below is an anchor tag with a linear-gradient. On hover, the background-position changes to reveal the second half of the link’s gradient.

See the Pen Slidey Background by Katy DeCorah (@katydecorah) on CodePen.

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:

1. The actual size of the gradient.
2. The size of the element clips the gradient to reveal the first half of the gradient.
3. 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 looks like they are both tugging at the same rectangle. I’ll have to hold onto this idea.