How to create text-fill animation using CSS ?
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.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content= "width=device-width, initial-scale=1.0" /> <title>Text Fill</title> </head> <body> <h1 data-text="Geeks">Geeks</h1> </body> </html> |
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.
<style> h1 { margin: 0; padding: 0; position: absolute; top: 50%; left: 50%; font-size: 5em; color: #ccc; } h1::before { /* This will create the layer over original text*/ content: attr(data-text); position: absolute; top: 0; left: 0; /* Setting different color than that of original text */ color: green; overflow: hidden; /* Setting width to 0*/ width: 0%; transition: 1s; } h1:hover::before { /* Setting width to 100 on hover*/ width: 100%; } </style> |
Complete Code: It is the combination of the above two sections of code.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content= "width=device-width, initial-scale=1.0" /> <title>Text Fill</title> <style> h1 { margin: 0; padding: 0; position: absolute; top: 50%; left: 50%; font-size: 5em; color: #ccc; } h1::before { /* This will create the layer over original text*/ content: attr(data-text); position: absolute; top: 0; left: 0; /* Setting different color than that of original text */ color: green; overflow: hidden; /* Setting width as 0*/ width: 0%; transition: 1s; } h1:hover::before { /* Setting width to 100 on hover*/ width: 100%; } </style> </head> <body> <h1 data-text="Geeks">Geeks</h1> </body> </html> |
Output:
Please Login to comment...