CSS Text Fill Effect On Hover | Fill From Hover Direction

How we can fill a text from the direction of hover? Solution: Fill From Hover Direction, CSS Text Fill Effect On Hover.

Maybe you have seen many types of text fill effects before. There are many kinds of fill effects, with some effect fill slowly, with some fill fast or with glitch, etc. Many peoples create a creative one, I saw a fill effect like water filling in text, that was awesome.

Today I will show you a different kind of fill effect, maybe have seen before. This filling effect depends on hover direction, if you hover on text from the left then it will fill left to right. This is the whole concept of this text fill effect. The same conditions will apply for other directions like right, top, & bottom.

So, Today I am sharing a CSS Text Fill Effect on hover, fill from hovering direction. This effect is pure CSS, but it’s a little bit tricky. Using CSS3 we can create a lot of amazing stuff like this. Creating this effect possible with CSS variables otherwise, we have to use JavaScript. I am sure that I will understand fully how its work after seeing the codes.

If you are thinking now how this effect actually, then see the preview given below.

Preview Of Fill From Hover Direction

See this video preview to getting an idea of how this fill effect look like.

https://webdevtrick.com/wp-content/uploads/text-fill-from-hover-direction.mp4?_=1

Now you can see the effect visually. If you like this then get the source code of its.

You May Also Like:

• CSS Text Shadow Effects
• Responsive CSS Flexbox
• HTML CSS Glitch Effect
• Calendar With HTML CSS JavaScript
• Animate & Divide Text On Scroll

Discussion

Before sharing source code, let’s talk about how it works. I created a div and put 4 <a> and one <span> inside it. & gave positon: absolute in both tags. And put both one same position, One over the other. After that, I created a path on every <a> tag using CSS clip-path (get info) property. I created a different path for each hyperlink tag, by using CSS :nth-child(x) property.

Basically, the path creates for different directions, 4 paths for four sides left, right, top, & bottom. I used CSS var for giving text color, fill from, & fill to which direction values. If you don’t know about var then this is an example:

Now we created a variable for text color, now we don’t have to put black value in multiple fields. Just have to put the variable name which place we want the black color.

After that, I created a fill effect for each direction. As you know I created a path for different directions. At this time I used :nth-child() property again, but this time I add :hover with that. Now it looks like a:nth-child(1):hover ~ .text:before { }. This creates the fill direction on which direction we will hover.  Suppose we create a path on the left side, when we will hover from the left or on the path, then the text will fill from left to right.

Inside this direction hover effect I created two variable, on for declare where we start the fill and where ends. I gave the name for those variable, --from & --to. Then I created an animation using the @keyframe property & put it on every direction’s hovering effect. I used variables name in animation, its look like this.

After all, let’s talk about the main things, The highest priority in this effect goes to data-text. The data-* attributes is used to store custom data private to the page or application (more info). I think now you can understand the whole concept after getting the codes.

CSS Text Fill Source Code

For creating this program you have to create just 2 files. One for HTML & one for CSS. Follow the steps to creating this without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given below.

style.css

Now create a CSS file named ‘style.css‘ and put the codes.

That’s It. Now you have successfully created the CSS Text Fill effect from hover direction. If you have any doubt or question comment down below.
Credit & Inspiration From Vangeltzo

Thanks For Visiting, Keep Visiting.