Hovering color cycle with linear-gradients!
Namaste! I was on a site for a program used to manipulate/organize SVG files and I ran across what I think is a really cool effect. When you hover over the download link you get a color strobing effect. My first thought was, “How do they do that!” I fired up the inspector and found that they were doing it with some simple CSS – utilizing keyframes and linear-gradients. I decided to write up a small tutorial showcasing how you can do this on your site with any element you would like. I will post the CSS, which you can modify and add to your child stylesheet, at the end of the tutorial. Note-I only realized after typing up this tutorial that “background-clip: text;” does not work in firefox! Instead, your text will appear as a solid color on a strobing background.
Okay, what I put together using Divi as my base theme doesn’t look that pretty, but it is just a way to get you started with keyframes and CSS animation! Any item can get this effect as long as it can get a background/color through CSS. In the example here I am styling some straight text, rather than a link. So, for this demo, I just added a text module and gave it a custom class of glowtext. For simplicity I’ll just walk you through the top animation, but the other will be easy to replicate if you follow along.
As I alluded to above, the entirety of this effect is accomplished using CSS. First up we want to set up the colors that we want to cycle through. The first set of text above uses just three colors, while the second uses four. In order to accomplish this, we will use a simple linear gradient for the background of the actual text (notice the “p” tag), not the div container. The linear-gradient() function takes a variety of arguments. In this case, we are first defining the direction of the gradient as starting at the left side of the bounding div and going right. In newer browsers you can use “to right”, but for older browser support I elected to use “90deg”. Next, we are giving a series of hexadecimal color codes. You can fool around to find what looks good. In this case, it will use 50% of the width to go from #42b4ac to #fddbcf, and the other half to go back.
Next, we are going to give it a size that is larger than the actual text length, but full height. This is accomplished with the “background-size:” CSS property. In this case, we are saying, “make it 3.5 times wider and full height.” Up to this point, we would simply have a block around the text. The first bit of magic comes in when we use “-webkit-background-clip: text;”. That propery tells the browser to get rid of any image that isn’t under the text. Next, we set the text to transparent to be able to see the image behind.
Okay, so now we have a nice gradient background, but how do we get it to strobe on hover? For this, we need to use the :hover pseudoclass and some @-keyframes rules. The @-keyframe rules allow us how we want something to act at different timepoints after an event.
With this CSS, we are asking the browser to run an animation sequence outlined by the @keyframe rule, “gradient-text-bg”. We are also stating that the animation should take 1.6 seconds to go through the whole set of rules, it should continue running forever, and when it gets to the end it should just reverse the rules and go backward to the beginning.
Our @-keyframes rules are set-up by prefixing different CSS properties with percentage indicators. Here I have designated two stops – the beginning with “0%”, and the end with “100%”. The browser will smoothly interpolate between my background position starting point with it being at the left side of the element, in the middle and moving the offset to the right side. I have to admit, I have a little trouble envisioning this in my head, but it works! Also, I think that you should be able to leave off the second value, but I’m including it in case some browsers require it.
And that is it! For the bottom effect, I simply added another color. You can fool around with angle, numbers of colors, timing of the animation, and font width to get your own effects. I hope everything was relatively clear, but I’ll be happy to clarify if you drop me a comment.