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.

filter_none

edit
close

play_arrow

link
brightness_4
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>
</head>
  
<body>
    <h1 data-text="Geeks">Geeks</h1>
</body>
  
</html>

chevron_right


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.



filter_none

edit
close

play_arrow

link
brightness_4
code

<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>

chevron_right


Complete Code: It is the combination of the above two sections of code.

filter_none

edit
close

play_arrow

link
brightness_4
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>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. 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.