JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="cta3"><li class="drive-traffic"><a href="#">Drive Traffic</a><div class="cta3 drive"><h3>Drive Traffic</h3>Acquire customers, increase awareness or build an audience through content<a class="ghost" href="node/608">Learn More</a></div></li></ul>

CSS

.cta3 {
    margin-top: 200px;
}

.cta3 li {
  -moz-perspective: 1000;
  -webkit-perspective: 1000;
  perspective: 1000;
  padding: 0;
  display: block;
  width: 33.3%;
  text-align: center;
  float: left;
  position: relative;
}

.cta3 li .cta3 {
  opacity: 0;
  -moz-transform-origin: bottom;
  -ms-transform-origin: bottom;
  -o-transform-origin: bottom;
  -webkit-transform-origin: bottom;
  transform-origin: bottom;
  -moz-transform: rotateX(90deg);
  -ms-transform: rotateX(90deg);
  -webkit-transform: rotateX(90deg);
  transform: rotateX(90deg);
  -moz-transition: 400ms;
  -o-transition: 400ms;
  -webkit-transition: 400ms;
  transition: 400ms;
  width: 100%;
  position: absolute;
  bottom: 0;
  background: #3570CC;
  text-align: center;
  z-index: 2000;
  font-size: 15px;
  padding: 20px;
}

.cta3 li:hover .cta3 {
  bottom: -10px;
  opacity: 1;
  -moz-transform: rotateX(0deg);
  -ms-transform: rotateX(0deg);
  -webkit-transform: rotateX(0deg);
  transform: rotateX(0deg);
}