<base href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/">
<figure>
  <figcaption>Born To Run</figcaption>
  <img src="road-to-nowhere.jpg" alt="">
  <img src="road-to-nowhere.jpg" alt="">
</figure>

<svg id="svghalves">
  <defs>
    <clipPath id="tophalf" clipPathUnits="objectBoundingBox">
      <polygon points="0 0,1 0,1 .5,0 .5" />
    </clipPath>
    <clipPath id="bottomhalf" clipPathUnits="objectBoundingBox">
      0 50%, 100% 50%, 100% 100%, 0 100%
      <polygon points="0 .5,1 .5,1 1,0 1" />
    </clipPath>

  </defs>
</svg>
@import url(https://fonts.googleapis.com/css?family=Montserrat:700);
* { box-sizing: border-box; }
body { margin: 0; 
background: #222; }
figure {
  position: relative;
  width: 60vw;
  height: 60vw;
  margin: 0 auto;
  overflow: hidden;
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/mad-dog.jpg);
  background-size: cover;
}

figure img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transition: 2s ease-in-out;
}

figure img:first-of-type {
  clip-path: url(#tophalf);
  clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
}

figure img:last-of-type {
  clip-path: url(#bottomhalf);
  clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
}

figure:hover img:first-of-type {
  transform: translateY(-45%);
}

figure:hover img:last-of-type {
  transform: translateY(45%);
}

figcaption {
  font-family: Montserrat, sans-serif;
  padding-top: 12vw;
  top: 0;
  font-size: 10vw;
  width: 100%;
  height: 100%;
  position: absolute;
  color: white;
  text-align: center;
}
#svghalves { width: 0; height: 0; }
@media all and (max-width: 500px) {
  figure { 
    width: 100%;
    height: 100vw;
  }
  figcaption {
    font-size: 20vw;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.