I'm experimenting with creating a unique text effect where, upon hovering over the text, it appears as though a block of color is passing through it.
Inspired by the technique showcased in this first example (specifically for the word "Kukuri"), I utilized a :before pseudo-element in my SCSS code to achieve the desired color fill effect:
.text {
position: relative;
&:hover {
&:before {
width: 100%;
}
}
&:before {
content: 'HELLO'; // assuming our text is "HELLO"
width: 0%;
position: absolute;
z-index: 2;
overflow: hidden;
color: red;
transition: width 350ms ease-in-out;
white-space: nowrap;
width: 0%;
}
}
Now, I am curious if it's achievable to animate the width of the :before element in reverse. Essentially, once it reaches 100% width and fills with color, I want the left side to gradually empty until it returns to 0% fill.
The ultimate aim is to incorporate this effect into a navigation menu, similar to how a block of color appears to move across menu items on hover:
https://i.sstatic.net/luCLb.png
For instance, hovering over the "About" item should trigger the fill color to wipe down while
Suggested Approaches
One approach I attempted was translating the
:beforeelement, adjusting theleftandrightproperties, and tweaking thetransform-origin, but without success.I also explored using
mix-blend-modeto create a rectangular mask that could potentially add color to the text. However, after some investigation, I discovered thatmix-blend-modeonly interacts effectively with text and not with rectangular divs featuring background colors.