CSS Text Animation | CSS Text Hover Effect

 

Hi there, today I am sharing another simple snippet based on CSS text animation on hover. Previously I have shared a couple of CSS text animation snippets on this blog. Check those out if you have not already.

Hover animation is something that common in modern web design. We can see these effects on links, images, texts, and so on. This project will show a short CSS text animation like when we will hover over the text; the background color will appear with a sliding animation from the left side. When we release the hover, the background color will disappear in the same direction. I have used plain HTML and CSS to create this light snippet, and no javascript or jquery was used.

The HTML markup for this snippet is easy as pie. I just have taken a div element named 'box' and places an h2 tag inside it. I put a random text in between the h2 title and set the same text in the data-text attribute. That's it for the HTML part.

You may also like:

• Responsive Image Gallery with CSS Flexbox
• Pure CSS Animated Sticky Navbar

In the CSS part, I gave the universal selector a margin padding of zero to adjust the whole document's default margin padding. After that, I have given the 'box' div element a background color and used the CSS flex property to make the element inside it to the center of the document. Then I did some basic styling for the h2 tag and later styled the CSS pseudo-element of the h2 title. The h2 pseudo-element width will be zero, but when we will hover over it, the width will be 100% of the h2 tag. for a smooth transition, I have also set a one-second CSS transition for the h2 pseudo-element.

For creating this lightweight snippet, you have to make an index.html and style.css file and later copy and paste the below code in there and save. Run the project to your browser and play around with code by tweaking the snippet's CSS values.

HTML

<div class="box"> <h2 data-text="Text Effect">Text Effect</h2> </div>


CSS 

*{ padding: 0; margin: 0; } .box{ background: #f4bb00; height: 100vh; margin: 0; padding: 0; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; justify-content: center; align-items: center; } .box h2 { position: relative; margin: 0; padding: 0; font-family: sans-serif; font-size: 8em; color: #fff; text-transform: uppercase; font-weight: 900; } .box h2:before{ color: #262626; 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%; }

I hope you liked this simple and straightforward snippet. For more of this kind, please follow our social media profile to stay connected with this blog. Thank you very much for visiting the blog.