<div class="flex-wrapper">
  <a href="" class="one">
    <div class="overlay">
      <div class="overlay-inner">
        <h2>Title #1</h2>
        <p>Fusce vulputate orci at nulla consequat, ac tincidunt quam ultrices.</p>
      </div>
    </div>
  </a>
  <a href="" class="two">
    <div class="overlay">
      <div class="overlay-inner">
        <h2>Title #2</h2>
        <p>Quisque facilisis enim eu mi condimentum, id interdum diam pharetra.</p>
      </div>
    </div>
  </a>
  <a href="" class="three">
    <div class="overlay">
      <div class="overlay-inner">
        <h2>Title #3</h2>
        <p>Donec laoreet enim sed risus suscipit, rutrum egestas ligula tristique.</p>
      </div>
    </div>
  </a>
  <a href="" class="four">
    <div class="overlay">
      <div class="overlay-inner">
        <h2>Title #4</h2>
        <p>Etiam porta, enim non vulputate consectetur, neque lectus finibus erat, eu. </p>
      </div>
    </div>
  </a>
  <a href="" class="five">
    <div class="overlay">
      <div class="overlay-inner">
        <h2>Title #5</h2>
        <p>Cras nunc augue, egestas sed maximus non, consectetur in nunc.</p>
      </div>
    </div>
  </a>
</div>

body {
  font: normal 18px/1.5 "Helvetica Neue", sans-serif;
}

.flex-wrapper {
  display: flex;
  height: 100vh;
}

.flex-wrapper a {
  position: relative;
  flex: 1;
  text-align: center;
  text-decoration: none;
  color: #fff;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: flex .4s;
}

.flex-wrapper .one {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/nav-001.jpg);
  background-color: red;
}

.flex-wrapper .two {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/nav-002.jpg);
  background-color: green;
}

.flex-wrapper .three {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/nav-003.jpg);
  background-color: steelblue;
}

.flex-wrapper .four {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/nav-004.jpg);
  background-color: orange;
}

.flex-wrapper .five {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/nav-005.jpg);
  background-color: tomato;
}

.flex-wrapper a:hover {
  flex: 3;
}

.flex-wrapper .overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transition: background-color .4s;
}

.flex-wrapper a:hover .overlay {
  background-color: rgba(0, 0, 0, .5);
}

.flex-wrapper .overlay-inner * {
  visibility: hidden;
  opacity: 0;
  transform-style: preserve-3d;
}

.flex-wrapper .overlay h2 {
  transform: translate3d(0, -60px, 0);
}

.flex-wrapper .overlay p {
  transform: translate3d(0, 60px, 0);
}

.flex-wrapper a:hover .overlay-inner * {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: all .3s .3s;
}