index.html

<base href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/">
<div id=sliding-container>
  <figure>
    <img src="hong-kong-skyline.jpg" alt>
    <figcaption>Hong Kong Skyline at Night</figcaption>
  </figure>
  <figure>
    <img src="monument-valley-panorama.jpg" alt style="position: absolute;">
    <img src="monument-valley-mittens-panorama.jpg" alt>
    <figcaption>Monument Valley</figcaption>
  </figure>
</div>

Panoramic Image Scroll & Cross-Fade Effects.markdown

Panoramic Image Scroll & Cross-Fade Effects

Complete article

A Pen by Dudley Storey on CodePen.

License.

style.css

body {
  background: #222;
}
#sliding-container {
  display: flex;
  font-family: Avenir, Helvetica, sans-serif;
}

#sliding-container figure {
  position: relative;
  flex: 1;
  font-size: 0;
  overflow: hidden;
  margin: 0;
}

#sliding-container img {
  transition: 2.4s linear;
  max-width: 100%;
}

#sliding-container figure:first-of-type img {
  width: 133%;
  max-width: initial;
}

#sliding-container figure:first-of-type:hover img {
  transform: translateX(-24%);
}

#sliding-container figure figcaption {
  background: rgba(0, 0, 0, 0.3);
  font-size: 1rem;
  width: 100%;
  color: #fff;
  padding: .3rem;
  position: absolute;
  margin: 0;
  transition: .6s;
  top: -2rem;
}

#sliding-container figure:hover figcaption {
  transform: translateY(2rem);
}

#sliding-container figure:last-of-type:hover img:nth-child(1) {
  opacity: 0;
}

@media screen and (max-width: 600px) {
  #sliding-container {
    flex-direction: column;
  }
}