Open In App

How to create text-fill animation using CSS ?

Last Updated : 21 Jun, 2020
Improve
Improve
Like Article
Like
Save
Share
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:



Similar Reads

Text Animation with changing the color of the text using HTML and CSS
Text animation is the creation of beautiful and colorful letters, words, and paragraphs with a decorative movable effect. The movement can be seen in some fashion within the area or across the screen following some regular pattern. The @keyframes in CSS allows defining a series of animations at specific points during an animation sequence. In this
2 min read
CSS animation-fill-mode Property
The animation-fill-mode property is used to specify the values that are applied by the animation before and after it is executed. Before playing the first keyframe or after playing the last keyframe CSS animations do not affect the element. The animation-fill-mode property can override this behavior. Syntax: animation-fill-mode: none | forwards | b
2 min read
How to Create Loading Blur Text Animation Effect using HTML and CSS ?
The blur text animation is known as the Smoky effect and it is used to give our text a blurry animation. The text blurs linearly in one direction and then reappears. Approach: The approach of this article is quite simple. We are animating the blur effect using the blur() function. Then we are using n-th child property to apply the animation delay.
3 min read
How to Create Jumping Text 3D Animation Effect using CSS ?
In this article, you will learn to implement Jumping Texts animation effect using simple HTML and CSS. HTML is used to create the structure of the page and CSS is used to set the styling. HTML Code: In this section, we will design the basic structure of the body. &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; &lt;meta charset=
4 min read
How to Create Text Changing Animation Effect using CSS ?
Almost any website that we visit today uses some kind of text animation to engage with its users. Generally, all kinds of text-animations are made using plain or vanilla JavaScript or by using some third-party JavaScript libraries. But there are some animations that can be made using only CSS. One of them is changing the word text animation. In thi
3 min read
How to Create Ghost Text Animation on Hover using HTML and CSS?
Ghost Text Animation can be used to give your website a spooky heading or sub-heading, this effect can be easily created using some simple HTML and CSS. HTML Code: In this section we have a ul tag which consists of some li tags displaying some text. &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; &lt;meta charset=&quot;UTF-8
2 min read
How to Create Sliding Text Reveal Animation using HTML & CSS ?
In this article, we will implement sliding text reveal animation which can be used in personal portfolios, websites, and even in YouTube introduction videos to add an extra edge to our videos so that it looks more interesting and eye-catchy at first instance and the best part is that we will do that using just HTML and CSS. Approach: The animation
2 min read
How to Create Text Color Animation using HTML and CSS ?
The text color can be changed according to the programmer’s choice using CSS @keyframes rule. In this article, we will see how to create text color animation using HTML and CSS. Preview:Approach:Create an HTML file with a centered &lt;div&gt; containing an &lt;h2&gt; element.Use CSS to reset default margin and padding for the body.Center the &lt;di
1 min read
How to create text stagger animation using TypographyMotion plugin ?
In this article, we will learn how to create text stagger animation using TypographyMotion plugin. This plugin is completely based on HTML, CSS, and JavaScript. This is one of the multiple animation techniques which encourages incremental delay from one state to another giving nice visual interactive applications. Note: Please download the Typograp
3 min read
How to Create Text Animation Effect using JavaScript ?
Creating text animations in JavaScript can add an extra layer of interactivity and engagement to a website or application. By using JavaScript, we can create text that moves, fades, changes color, or transforms in other ways. Animating text can also help convey important information or messages in a visually appealing way. We are going to learn how
2 min read