<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;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.