Amazing CSS with hover effect on text

Posted on October 27th, 2019

This post shows you how to create an amazing css with hover effect on text. It is from Darkcode. Just click on the button Run Pen below to see how it works:

How to create a hover effect on text

Step 1: Add Html

<div class="middle">
  <span class="container">
    <div class="text" data-text="Effect">Effect</div>

Step 2: Add CSS

body {
  margin: 0;
  padding: 0;
  font-family: 'montserrat', sans-serif;
.middle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

.container {
  position: relative;
  display: inline-block;
  padding: 0 40px;
  cursor: pointer;

.text {
  font-size: 100px;
  text-transform: uppercase;
  font-weight: 900;
  position: relative;
  color: #34495e;
.text::before {
  content: attr(data-text);
  position: absolute;
  color: #fff;
  width: 0;
  overflow: hidden;
  transition: 0.6s;
.container::before {
  content: '';
  width: 0%;
  height: 100%;
  position: absolute;
  background: #2980b9;
  right: 0;
  top: 0;
  transition: 0.6s;
.container:hover .text::before,
.container:hover::before {
  width: 100%;