If you've made it this far—and you're using Safari or Chrome—you've probably seen the hover effect we've put on links to our blog posts. If not, well:

Hover me! I'm animated!

## Building Blocks We like this effect a lot, though it is a *bit* complicated. We're thankful to [Divya Manian](http://nimbupani.com/using-background-clip-for-text-with-css-fallback.html) for her tutorial on achieving the effect on the text. To save ourselves from having to explain how the text knockout works, please check out her article.

Getting Complicated

Because we want to animate the background, we need to get a bit more complicated than the base technique. Instead of the two background entries, we use four:

1. A transparent–transparent gradient (as described in Divya's tutorial).
2. The image, which is outlines the top of the wave.
3. A white–white gradient, placed off the left of the element.
4. A gold-gold gradient.

To create the effect we're looking for, we slide the white panel in from the left, which creates the animation.

SCSS

Here's the SCSS we use:

h1 {
  // Line-height 1 is necessary because of the way the background size is calculated.
  line-height: 1;
  // Color is important for the fallback
  color: #fcb216;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 4rem;
  // Necessary per Divya's tutorial
  -webkit-text-fill-color: transparent;
  // Ditto
  background: -o-linear-gradient(transparent, transparent);
  
  // Here's ours pile of backgrounds
  background: 
    // Necessary per Divya's tutorial
    -webkit-linear-gradient(transparent, transparent),
    // The top image         
    url('//2wav.com/img/wave_top.svg'), 
    // The white panel we'll be moving
    -webkit-linear-gradient(white,white), 
    // The gold background
    -webkit-linear-gradient(#fcb216, #fcb216);

   // We have to declare a background size for each element, in order
   // Thanks to some SVG oddity, we had to make the wave (the second element) 100%
   // We make the third element 200% 100% so that it can move. Our thanks to http://stackoverflow.com/a/25649073 for helping us understand what goes into background-size and -position
  background-size: cover, 110%, 200% 100%, 100%;

  // Likewise with the position
  // The important element is the third, at 200%—that's the white square we move
  background-position: top left, top, 200% 0%, right;

  // This is what gives us the clip over the image
  -webkit-background-clip: text;

  // This stops anything from repeating
  background-repeat: no-repeat;

  // Here's our transition
  transition: 
    // This transition is for supported browsers
    background-position 850ms ease-out, 
    // And this one for those that do not
    color 850ms;
  
  // Here's the hover effect
  &:hover {
    // Here we move the white panel 
    background-position: top left, top, 0%, right;
    // And change the text color, for fallback
    color: white;
  }
}

Fiddly Bits

The only part of this that's particularly complicated is the background-size and -position of the white panel. We had a lot of troubles trying to get the background to behave correctly, as you can see in this Codepen. We were pretty stymied until we found this excellent Stack Exchange answer from BoltClock.

Thanks!

As usual, we couldn't have gotten here without help from the amazing developer community. We'd like extend our thanks to you, as well, for joining us.

Here's the Codepen:

See the Pen Wav Hover-text effect 2 by Adrian Bettridge-Wiese (@arbw) on CodePen.