Text-fill animation on hover is a type of text-animation of modern web design concepts. In this animation, the text is filled with a color different from that of the original text-color in a particular direction i.e. left to right, right to left, top to bottom, or bottom to top.
This type of animations is not limited to only text. You can use the same technique to fill any part or shape like filling a glass or cup can be a good implementation of this animation.
Approach: The approach is to cover the text with a layer of different color keeping its width as 0 in starting and increasing the width to 100% on mouse-hover.
HTML Code: In this section, we have an “h1” element with a data-text attribute which we will use to put a layer over our original text.
CSS Code: For CSS, follow these below steps.
- Step 1: Apply some basic styling like aligning text to the center and a basic background color.
- Step 2: Set content as the attribute which we have used in “h1” tag. This will cover the original text.
- Step 3: Set width to 0 and set any color different than the original color of the text.
- Step 4: Now set “width” to 100 on mouse hover.
Note: You can set the “width” to any other value to cover only a specific part of the text on mouse hover. For example, set it to 50% so that the text will be filled only up to half of the length.
Complete Code: It is the combination of the above two sections of code.
- How to create X and Y axis flip animation using HTML and CSS ?
- How to Create Border Animation using CSS ?
- How to Create Loading Blur Text Animation Effect using HTML and CSS ?
- How to Create Gradient Background Animation using HTML and CSS ?
- How to Create Text Color Animation using HTML and CSS ?
- How to Create Jumping Text 3D Animation Effect using CSS ?
- How to Create Text Changing Animation Effect using CSS ?
- How to Create Animation Loading Bar using CSS ?
- How to Create Ghost Text Animation on Hover using HTML and CSS?
- How to Create a Dot loading Animation using HTML and CSS?
- How to create text stagger animation using TypographyMotion plugin ?
- Cartoon animation loader using CSS
- How to make smooth bounce animation using CSS ?
- Loading Text Animation Effect using CSS
- Rubber Band Text animation using HTML and CSS
- Text Animation with changing the color of the text using HTML & CSS
- Animation using clip-path property in CSS
- How to play the animation exactly two times using CSS ?
- How to play animation from start to end with same speed using CSS ?
- CSS | animation-delay Property
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.