JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<section class="info">
  <ul class="info__container">
    <li class="info__text">
      <span class="info__number">01</span> 
      <a class="info__link" href="#" data-text="Works">Works</a>
    </li>  
    <li class="info__text">
      <span class="info__number">02</span> 
      <a class="info__link" href="#" data-text="About">About</a>
    </li>
    <li class="info__text">
      <span class="info__number">03</span> 
      <a class="info__link" href="#" data-text="Contact">Contact</a>
    </li>
  </ul>
</section>

CSS

.info {
  max-width: 1920px;
  margin: 0 auto;
}

.info__container {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  text-decoration: none;
  list-style-type: none;
  font-size: 20px;
  color: #1c1c1c;
  background-color: #ebebeb;
  margin: 0;
  padding-left: 0;
  height: 150px;
  width: 100%;
  position: relative;
  z-index: 0;
  overflow: hidden;
}

.info__text {
  width: 60px;
}

.info__number {
  font-size: 22px;
  color: #7a7a7a;
}

.info__link {
  text-decoration: none;
  list-style-type: none;
  color: #1c1c1c;
}

.info__link:hover {
  color: white;
}

.info__link::before {
  content: attr(data-text);
  display: block;
  position: absolute;
  left: 0px;
  right: 0px;
  top: 50%;
  bottom: 50%;
  transition: all .5s ease;
  font-size: 100px;
  line-height: auto;
  font-family: "Roobert";
  color: #474747;
  background: #1c1c1c;
  overflow: hidden;
  z-index: -10;
}

.info__link:hover::before {
  top: 0;
  bottom: 0;
}