<div id="o-gallery">
  <figure>
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/fashion-backless.jpg" alt>
    <figcaption>Photograph of a woman in a backless dress</figcaption>
  </figure>
<figure>
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/fashion-front.jpg" alt>
  <figcaption>Fashion photograph of a woman</figcaption>
</figure>
<figure>
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/fashion-pair.jpg" alt>
  <figcaption>Fashion photograph of a man and woman embracing</figcaption>
</figure>
</div>

@keyframes captionfade {
  from { opacity: 0; }
  to { opacity: 1; }
}
body { 
  color: #444; 
  font-family: Avenir, sans-serif; 
}
div#o-gallery { 
  display: flex; 
  justify-content: space-between;
  max-width: 1600px;
  margin: 0 auto;
}
div#o-gallery figure { 
  position: relative; 
  flex: 1; 
  max-width: 500px;
  transition: 1s; 
  margin: 0; 
}
div#o-gallery img { 
  width: 200px;
  max-height: 200px;
  border: 1px solid;
  object-fit: cover;
  object-position: 0% 0%;
  transition: 1s;
  font-size: 0;
  line-height: 0;
}
div#o-gallery figure:hover { flex: 2; }
div#o-gallery figcaption { 
  position: absolute;
  top: 43%; 
  left: 105%; 
  opacity: 0; 
  width: 50%; 
}
div#o-gallery figure:hover img { 
  width: 100%; 
  max-height: 700px; 
  object-fit: none; 
}
div#o-gallery figure:hover figcaption { 
  animation: captionfade forwards 1s 1s; 
}
div#o-gallery figure:nth-child(2) { text-align: center; }
div#o-gallery figure:nth-child(2) figcaption { text-align: left; }
div#o-gallery figure:last-child { text-align: right; }
div#o-gallery figure:last-child figcaption { left: -55%; }

@media all and (max-width: 600px) {
  div#o-gallery { flex-direction: column; }
  div#o-gallery figcaption { 
    top: 102%; 
    left: 0; 
    width: 30%; 
  }
  div#o-gallery figure { max-width: 100%; }
  div#o-gallery img { 
    border: none; 
    text-align: center; 
  }
div#o-gallery figure:nth-child(2) figcaption, div#o-gallery figure:last-child figcaption  {
  top: -11%; 
  left: auto; 
  right: 0; 
  width: 25%; 
}
div#o-gallery figure:last-child figcaption { top: -18%;}
}
@media all and (max-width: 400px) {
div#o-gallery figure:hover { margin-bottom: 4rem; }
div#o-gallery figcaption, div#o-gallery figure:nth-child(2) figcaption, div#o-gallery figure:last-child figcaption { 
  width: 100%; 
  text-align: center; 
}
div#o-gallery figure:nth-child(2) figcaption { top: -7%; }
div#o-gallery figure:nth-child(3) figcaption { top: -9%; }
div#o-gallery figure:nth-child(2):hover, div#o-gallery figure:nth-child(3):hover { margin-top: 4rem; margin-bottom: 0; }
}