Text fill effect - simulate a block of color passing through text

Question

I'm trying to create a text effect so when you hover over text, a block of color seems to pass through the text.

I followed exactly what the first example here (for the word "Kukuri") does by using a :before pseudo-element to achieve the color fill. I have the code written here in SCSS:

.text {
  position: relative;

  &:hover { 
    &:before {
      width: 100%;
    }
  } 

  &:before {
    content: 'HELLO'; // if our text was "HELLO"
    width: 0%;
    position: absolute;
    z-index: 2;
    overflow: hidden;
    color: red;
    transition: width 350ms ease-in-out;
    white-space: nowrap;
    width: 0%;
  }
}

However, I'm wondering if it's possible to animate the :before element's width the other way? So once it hits 100% width and fills with color, then the left side starts emptying and it goes back to 0% fill.

The end goal is to use this for a navigation menu. Something like this effect where it seems like a block of color is moving through menu items when you hover:

For something like this, hovering over "About" item would make the fill color wipe down while

Attempted Solutions

1. I tried translating the :before element, changing the left and right properties, and changing transform-origin to no avail.

2. I've tried looking into mix-blend-mode to try and create a rectangular mask that could potentially add color to the text. However, to my understanding, mix-blend-mode only works with text and not with rectangular divs with background-colors.

Answer 1

You can use blend modes for this effect, here you have one posibility:

I opted for moving the background of the pseudo rather than moving the pseudo itself, This way you won't have side effects when the pseudo is over other elements.

Also, it isn't clear for me if you want a single slide or a double one. I have set it to be a double one ( from black to red and again to black. You can change this easily adjusting the final background position

.demo {
    background-color: yellow;
    margin: 10px;
    display: inline-block;
    font-size: 50px;
    padding: 10px;
    position: relative;
}

.demo:after {
    content: "";
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to right, transparent 25%, red 25%, red 75%, transparent 75% );
    mix-blend-mode: lighten;
    background-size: 400% 100%;
    transition: background-position 2s linear;
    background-position: 100% 0%;
}

.demo:hover:after {
    background-position: 0% 0%;
}

<div class="demo">TEST1</div>
<div class="demo">TEST2</div>

To change the movement to vertical, you need to change

• the gradient direction
• which of the image dimensions is oversized
• the background position that is changed on hover

.demo {
    background-color: yellow;
    margin: 10px;
    display: inline-block;
    font-size: 50px;
    padding: 10px;
    position: relative;
}

.demo:after {
    content: "";
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to top, transparent 25%, red 25%, red 75%, transparent 75% );
    mix-blend-mode: lighten;
    background-size: 100% 400%;   /* changed vertical dimension */
    transition: background-position 2s linear;
    background-position: 0% 100%; /* changed 100 position to vertical*/
}

.demo:hover:after {
    background-position: 0% 0%;
}

<div class="demo">TEST1</div>
<div class="demo">TEST2</div>

Answer 2

You may do something like this by simply using a layer that pass above your element with transparent background:

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

ul li {
  display: inline-block;
  margin: 10px;
  position: relative;
  font-size: 30px;
  color: red;
  font-weight: bold;
  overflow: hidden;
}

ul li:before {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  background: rgba(255, 255, 255, 0.6);
  transition: 2s;
  z-index: 2;
}

ul.ver li:before {
  top: 0;
  left: -100%;
}

ul.hor li:before {
  top: -100%;
  left: 0;
}

ul.ver li:hover::before {
  left: 100%;
}

ul.ver.half li:hover::before {
  left: 0;
}

ul.hor li:hover::before {
  top: 100%;
}
ul.hor.half li:hover::before {
  top: 0;
}

<ul class="hor">
  <li>Home</li>
  <li>About</li>
</ul>
<ul class="hor">
  <li>Home</li>
  <li>About</li>
</ul>
<ul class="ver half">
  <li>Home</li>
  <li>About</li>
</ul>
<ul class="hor half">
  <li>Home</li>
  <li>About</li>
</ul>

And here is another example using mix-blend-mode with text:

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

ul li {
  display: inline-block;
  margin: 10px;
  position: relative;
  font-size: 30px;
  background-image: linear-gradient(to right, red, red);
  background-size: 200% 200%;
  background-repeat: no-repeat;
  font-weight: bold;
  overflow: hidden;
  transition: 1s;
}
ul.hor li {
  background-position: 0% 200%;
}
ul.ver li {
  background-position: 200% 0%;
}

ul li span {
  display: inline-block;
  color: black;
  background-color: white;
  mix-blend-mode: screen;
}

ul.hor li:hover {
  background-position: 0% -100%;
}
ul.ver li:hover {
  background-position:-100% 0%;
}
ul.hor.half li:hover {
  background-position: 0% 0%;
}
ul.ver.half li:hover {
  background-position:0% 0%;
}

<ul class="hor">
  <li><span>Home</span></li>
  <li><span>About</span></li>
</ul>
<ul class="ver">
  <li><span>Home</span></li>
  <li><span>About</span></li>
</ul>
<ul class="hor half">
  <li><span>Home</span></li>
  <li><span>About</span></li>
</ul>
<ul class="ver half">
  <li><span>Home</span></li>
  <li><span>About</span></li>
</ul>

Answer 3

    .text {
	text-transform: uppercase;
	font-weight: 900;
	overflow: hidden;
	line-height: 0.75;
	color: #c5c2b8;
    position:relative;
}
    .text:before {
    	content: attr(data-letters);
    	position: absolute;
    	z-index: 2;
    	overflow: hidden;
    	color: red;
    	white-space: nowrap;
    	width: 0%;
        top:0;
    	-webkit-transition: width 0.4s 0.3s;
    	transition: width 0.4s 0.3s;
    }

    .text:hover:before {
    	width: 100%;
    }
    <span class="text" href="#" data-letters="hello">hello</span>