CSS Text Animation | CSS Text Hover Effect

byCodingFlicks -October 05, 2020

0

Text animation is a web design tool that helps to enhance visual storytelling, increase engagement, and make the user experience engaging. In this blog post, we are providing you with the source code of a color-revealing text hover animation created using HTML and CSS. We have not used any JavaScript code, just pure CSS with a smooth result. Previously, we have shared a few CSS text animation snippets on this blog. If you haven’t already, check them out. We have provided a related video tutorial for this snippet. Please make sure to watch the tutorial before collecting the source code.

Video Tutorial:

We hope you enjoyed the above tutorial on CSS Text Fill Color Animation on Hover. Hover animation is something that is common in modern web design. We can see these effects on links, images, text, etc. This project will show a simple CSS text animation, where we hover over the text and the background color appears with a sliding animation from the left. When we release the hover, the background color disappears on the same side.

In the HTML part, we have a container (div) and a heading (h2). The text effect comes to life through the clever use of CSS pseudo-elements. This snippet creates a layered effect where a new colored text is revealed when the user hovers over it. This CSS animation is like stacking two versions of the same text on top of each other, where the top one is initially hidden but beautifully displayed during the hover interaction. We used CSS Flexbox to perfectly center the content horizontally and vertically within the viewport. We used a bold black background to create contrast. We also used white and sky-blue typography to make the text visually pop. We used the Rubik Bubbles Google font and a large 8em font size. The: before pseudo-element takes the same text as the original h2 using the content: attr(data-text) declaration. We kept the same text as the H2 text and the attr(data-text) declaration. Initially, this pseudo-element has a width of 0. But on hover, that width gradually increases to 100%. We used CSS Transition for this.

You May Also Like:

CSS Text Fill Color Animation on Hover [ Source Code ]:

To create this HTML and CSS Text fill color animation on hover, we will need an HTML and a CSS file. After creating the files, please copy the code from the code box below and paste it into your files. You can also download the full code from the download button at the bottom of this blog post.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
<!-- codingflicks.com -->    
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Fill Text Animation</title>
    <link href="https://fonts.googleapis.com/css2?family=Rubik+Bubbles&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="box">
        <h2 data-text="Text Animation">Text Animation</h2>
    </div>      
</body>
</html>

ADD CSS:

* {
	padding: 0;
	margin: 0;
}
.box {
	background: #000;
	height: 100vh;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
	align-items: center;
}
.box h2 {
	position: relative;
	margin: 0;
	padding: 0;
	font-family: "Rubik Bubbles", system-ui;
	font-size: 8em;
	color: #fff;
	text-transform: uppercase;
	font-weight: 900;
}
.box h2::before {
	color: deepskyblue;
	white-space: nowrap;
	content: attr(data-text);
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	transition: 1s;
	overflow: hidden;
}
.box h2:hover:before {
	width: 100%;
}

This type of text animation is ideal for any hero section, navigation menu, banner, or title that needs to grab full attention. If you're interested in trying out new animation ideas, this type of animation is a great addition to your creative toolkit. Grab the source code and experiment with colors, change the font, or speed up the animation, and see what happens. For more code, please visit our homepage and click the Load More button. Thank you for visiting the website.

DOWNLOAD CODE

Please do not enter any spam link in the comment box.