Text Hover Effects in CSS

In this article, we'd love to share a hover text effect with you.

Follow these simple steps to create a hover effect.

HTML

<h2 class="title top" data-letters="Text hover effect from top!">Text hover effect from top!</h2>
<h2 class="title bottom" data-letters="Text hover effect from bottom!">Text hover effect from bottom!</h2>
<h2 class="title left" data-letters="Text hover effect from left!">Text hover effect from left!</h2>
<h2 class="title right" data-letters="Text hover effect from right!">Text hover effect from right!</h2>

CSS

.title {
  font-size: 5em;
  margin: 0;
  position: relative;
  color: #4C4C4C;
  display: inline-block;
  -webkit-text-stroke-width: 0px;
  text-stroke-width: 0px;
}
.title:before {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  content: attr(data-letters);
  overflow: hidden;
  white-space: nowrap;
}
.title.top:before {
  transition: height 1s;
  color: #EA4335;
  height: 0;
  z-index: 999;
}
.title.top:hover:before {
  height: 100%;
}

.title.bottom {
  color: #EA4335;
}
.title.bottom:before {
  transition: height 1s;
  color: #4C4C4C;
  height: 100%;
  z-index: 999;
}
.title.bottom:hover:before {
  height: 0;
}
.title.left:before {
  transition: width 1s;
  color: #EA4335;
  width: 0;
  z-index: 999;
}
.title.left:hover:before {
  width: 100%;
}
.title.right {
  color: #EA4335;
}
.title.right:before {
  transition: width 1s;
  color: #4C4C4C;
  width: 100%;
  z-index: 999;
}
.title.right:hover:before {
  width: 0;
}