JSFiddle - React, Tailwind, and code Playground

HTML

<div class="card">
  <div class="image"></div>
  <div class="card__overlay">
    <div class="card__overlay-header">Sensation</div>
    <a href="#" class="card__overlay-link">Click me</a>
  </div>
</div>

CSS

.card {
  width: 240px;
  height: 150px;
  overflow: hidden;
  position: relative;
}

.card:hover .card__overlay,
.card:hover .card__overlay-header,
.card:hover .card__overlay-link {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

.image {
  width: 100%;
  height: 100%;
  background-color: #9E9E9E;
}

.card__overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  background-color: rgba(0, 0, 0, .75);
  transform: translate3d(460px, -100px, 0) rotate(180deg);
  transition: 400ms ease-in-out;
  opacity: 0;
}

.card__overlay-header {
  background-color: #f00;
  opacity: 0;
  transform: translate3d(0, -100px, 0);
  transition: 400ms ease-in-out 200ms;
}

.card__overlay-link {
  color: #fff;
  background-color: #f00;
  text-decoration: none;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 150px;
  height: 40px;
  line-height: 40px;
  margin: auto;
  text-align: center;
  opacity: 0;
  transform: translate3d(0, 100px, 0);
  transition: 400ms ease-in-out 200ms;
}