Open In App

How to create text-fill animation using CSS ?

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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:



Last Updated : 21 Jun, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads