body {
  padding: 0;
  margin: 0;
  font-family: sans-serif;
  overflow: hidden;
}

.container-box{
  width: 100vw;
  height: 100vh;
  display: flex;
  box-sizing: border-box;
}

.container-box .box {
  width: 20vw;
  text-align: center;
  line-height: 100vh;
  flex-grow: 1;
  background-size: cover;
  background-position: center;
  transition: 1s;
}

 h1 {
  padding: 0;
  margin: 0;
  font-size: 2em;
  line-height: 100vh;
  background: rgba(0, 0, 0, 0.8);
  transition: .5s;
}

h1 span {
  background: rgba(255, 255, 255, 0);
  width: 100%;
  transition: 1s;
  color: #FFF;
  padding: 25px 20px;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.box:hover h1 span {
  color: #262626;
  background: rgba(255, 255, 255, 0.8);
  letter-spacing: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}

.box:hover h1  {
  background: rgba(0, 0, 0, 0);
}

.box:hover {
  width: 40vw;
}

.container-box .box:nth-child(1) {
  background: url(http://68.media.tumblr.com/41c365d569b45d8dc834fdfeb5953f66/tumblr_nyatbtCc6A1ry4yngo1_500.gif);
}
.container-box .box:nth-child(2) {
  background: url(https://78.media.tumblr.com/637480db36c5dfce76f2418be9a41a1c/tumblr_ok8z4uFRZw1s7syh1o1_500.gif);
}
.container-box .box:nth-child(3) {
  background: url(https://78.media.tumblr.com/2f85dcddb07da180817e72a4fa370f35/tumblr_ohnutkpO5y1s8fey0o1_500.gif;)
}
.container-box .box:nth-child(4) {
  background: url(https://assets.bwbx.io/images/users/iqjWHBFdfxIU/i7FdQDTJdEAo/v0/-999x-999.gif);
}
.container-box .box:nth-child(5) {
  background: url(http://preziworld.com/wp-content/uploads/edd/2016/09/blue-animated-circle-abstract-technology-creative-prezi-template-presentation.gif);
}