<ul class="list">
  <li><a href="#0">① <span>This</span></a></li>
  <li><a href="#0">② <span>Little</span></a></li>
  <li><a href="#0">③ <span>Piggy</span></a></li>
  <li><a href="#0">④ <span>Went</span></a></li>
  <li><a href="#0">⑤ <span>To</span></a></li>
  <li><a href="#0">⑥ <span>Market</span></a></li>
</ul>
.list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}
.list li {
  flex: 1;
}
.list li a {
  text-decoration: none;
  color: inherit;
  padding-top: 1rem;
  display: block;
  text-align: center;
  overflow: hidden;
  font-size: 40px;
}
.list li a span {
  display: block;
  background: rgba(0, 0, 0, 0.1);
  padding: 0.5rem;
  font-size: 22px;
  margin-top: 1rem;
}

@media (hover: hover) {
  .list li a span {
    transform: translateY(100px);
    transition: 0.2s;
  }
  .list:hover span {
    transform: translateY(0);
  }
  .list li:nth-child(1) span {
    transition-delay: 0.0s;
  }
  .list li:nth-child(2) span {
    transition-delay: 0.05s;
  }
  .list li:nth-child(3) span {
    transition-delay: 0.1s;
  }
  .list li:nth-child(4) span {
    transition-delay: 0.15s;
  }
  .list li:nth-child(5) span {
    transition-delay: 0.2s;
  }
  .list li:nth-child(6) span {
    transition-delay: 0.25s;
  }
}







.list li:nth-child(1) {
  background: #90CAF9;
}
.list li:nth-child(2) {
  background: #80DEEA;
}
.list li:nth-child(3) {
  background: #A5D6A7;
}
.list li:nth-child(4) {
  background: #E6EE9C;
}
.list li:nth-child(5) {
  background: #FFF176;
}
.list li:nth-child(6)  {
  background: #FFD54F;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.