We’ve walked through a series of posts now about interesting approaches to CSS hover effects. We started with a bunch of examples that use CSS background properties, then moved on to the text-shadow property where we technically didn’t use any shadows. We also combined them with CSS variables and calc() to optimize the code and make it easy to manage.
In this article, we will build off those two articles to create even more complex CSS hover animations. We’re talking about background clipping, CSS masks, and even getting our feet wet with 3D perspectives. In other words, we are going to explore advanced techniques this time around and push the limits of what CSS can do with hover effects!
Hover effects using background-clip
Let’s talk about background-clip. This CSS property accepts a text keyword value that allows us to apply gradients to the text of an element instead of the actual background.
So, for example, we can change the color of the text on hover as we would using the color property, but this way we animate the color change:
HTML
<h3 class="hover">Hover Me</h3>
CSS
.hover {
color: #0000;
background:
linear-gradient(90deg,#1095c1 50%,#000 0)
var(--_p,100%)/200% no-repeat;
-webkit-background-clip: text;
background-clip: text;
transition: .4s;
}
.hover:hover {
--_p: 0%;
}
body {
height: 100vh;
margin: 0;
display: grid;
place-content: center;
}
h3 {
font-family: system-ui, sans-serif;
font-size: 3rem;
margin:0;
cursor: pointer;
padding: 0 .1em;
}
All I did was add background-clip: text to the element and transition the background-position. Doesn’t have to be more complicated than that!
But we can do better if we combine multiple gradients with different background clipping values.
HTML
<h3 class="hover">Hover Me</h3>
CSS
.hover {
--s: 0.1em; /* the thickness of the line */
--c: #1095c1; /* the color */
color: #0000;
padding-bottom: var(--s);
background:
linear-gradient(90deg,var(--c) 50%,#000 0) calc(100% - var(--_p,0%))/200% 100%,
linear-gradient(var(--c) 0 0) 0% 100%/var(--_p,0%) var(--s) no-repeat;
-webkit-background-clip: text,padding-box;
background-clip: text,padding-box;
transition: 0.5s;
}
.hover:hover {
--_p: 100%
}
body {
height: 100vh;
margin: 0;
display: grid;
place-content: center;
}
h3 {
font-family: system-ui, sans-serif;
font-size: 3rem;
margin:0;
cursor: pointer;
padding: 0 .1em;
}
In that example, I use two different gradients and two values with background-clip. The first background gradient is clipped to the text (thanks to the text value) to set the color on hover, while the second background gradient creates the bottom underline (thanks to the padding-box value). Everything else is straight up copied from the work we did in the first article of this series.
How about a hover effect where the bar slides from top to bottom in a way that looks like the text is scanned, then colored in:
HTML
<h3 class="hover">Hover Me</h3>
CSS
.hover {
--b: 0.1em; /* the thickness of the line */
--c: #1095c1; /* the color */
color: #0000;
padding-block: var(--b);
background:
linear-gradient(var(--c) 50%,#000 0) 0% calc(100% - var(--_p,0%))/100% 200%,
linear-gradient(var(--c) 0 0) 0% var(--_p,0%)/var(--_p,0%) var(--b) no-repeat;
-webkit-background-clip: text,padding-box;
background-clip: text,padding-box;
transition: .3s var(--_s,0s) linear,background-size .3s calc(.3s - var(--_s,0s));
}
.hover:hover {
--_p: 100%;
--_s: .3s;
}
body {
height: 100vh;
margin: 0;
display: grid;
place-content: center;
}
h3 {
font-family: system-ui, sans-serif;
font-size: 3rem;
margin:0;
cursor: pointer;
padding: 0 .1em;
}
Wrapping up
Oof, we are done! I know, it’s a lot of tricky CSS but (1) we’re on the right website for that kind of thing, and (2) the goal is to push our understanding of different CSS properties to new levels by allowing them to interact with one another.
You may be asking what the next step is from here now that we’re closing out this little series of advanced CSS hover effects. I’d say the next step is to take all that we learned and apply them to other elements, like buttons, menu items, links, etc. We kept things rather simple as far as limiting our tricks to a heading element for that exact reason; the actual element doesn’t matter. Take the concepts and run with them to create, experiment with, and learn new things!
