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.
Did you enjoy this post? Support SisterSong. SisterSong strengthens and amplifies the collective voices of indigenous women and women of color to achieve reproductive justice by eradicating reproductive oppression and securing human rights.