<svg style="display:none">
  <symbol id="arrow-left" viewBox="0 0 10 10">
    <path fill="currentColor" d="m9 4h-4v-2l-4 3 4 3v-2h4z"/>
  </symbol>
  <symbol id="arrow-right" viewBox="0 0 10 10">
    <path fill="currentColor" d="m1 4h4v-2l4 3-4 3v-2h-4z"/>
  </symbol>
</svg>
<h1>Photomontages by Hanna Höch</h1>
<div role="region" aria-label="gallery" tabindex="0" aria-describedby="instructions">
  <ul>
    <li>
      <figure>
        <img src="https://i.pinimg.com/originals/fe/61/b8/fe61b828c9490313681cda5257bae997.jpg" alt="two male figures in bathing costumes stand behind a wall on a cryptically doodled background">
        <figcaption>Heads of State</figcaption>
      </figure>
    </li>
    <li>
      <figure>
        <img src="http://www.lypophrenia.com/wp-content/uploads/2011/01/Hannah-H%C3%B6ch_Astronomy-and-Movement-Dada-250%C3%97190-mm-drawing-and-collage-1922.jpg" alt="stark photomontage with jagged edges and red, yellow, and blue shades">
        <figcaption>Astronomy and Movement Dada</figcaption>
      </figure>
    </li>
    <li>
      <figure>
        <img src="http://www.lypophrenia.com/wp-content/uploads/2011/01/Hannah-H%C3%B6ch_-Mother-watercolour-and-photograph-collage-on-grey-paper-41o%C3%9735o-mm-1925%E2%80%936.jpg" alt="Strange portrait-like montage. The subject is rotund and wears a torturous looking mask.">
          <figcaption>Mother</figcaption>
      </figure>
    </li>
    <li>
      <figure>
        <img src="https://i.pinimg.com/originals/53/d9/e2/53d9e2cf92b05d3f7ddd903e5c91538a.jpg" alt="Reclining nude on a colourful bed, wearing a large, monster-like mask and spectacles">
        <figcaption>Untitled</figcaption>
      </figure>
    </li>
    <li>
      <figure>
        <img src="https://d32dm0rphc51dk.cloudfront.net/WGpoh18Y3iHXoI9g7rHSBw/large.jpg" alt="Photomontoge of female figures and automobile parts, featuing several instances of the BMW logo">
        <figcaption>The Beautiful Girl</figcaption>
      </figure>
    </li>
  </ul>
</div>
<div id="instructions">
  <p id="touch">
    <svg aria-hidden="true" focusable="false"><use xlink:href="#arrow-left"></use></svg>
    swipe for more
    <svg aria-hidden="true" focusable="false"><use xlink:href="#arrow-right"/></svg>
  </p>
  <p id="hover">
    <svg aria-hidden="true" focusable="false"><use xlink:href="#arrow-left"></use></svg>
    scroll for more
    <svg aria-hidden="true" focusable="false"><use xlink:href="#arrow-right"/></svg>
  </p>
  <p id="focus">
    <svg aria-hidden="true" focusable="false"><use xlink:href="#arrow-left"></use></svg>
    use arrow keys for more
    <svg aria-hidden="true" focusable="false"><use xlink:href="#arrow-right"/></svg>
  </p>
  <p id="hover-and-focus">
    <svg aria-hidden="true" focusable="false"><use xlink:href="#arrow-left"></use></svg>
    scroll or use arrow keys for more
    <svg aria-hidden="true" focusable="false"><use xlink:href="#arrow-right"/></svg>
  </p>
</div>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
  margin: 3rem auto;
  max-width: 40rem;
  padding: 1rem;
  color: #111;
}

h1 {
  text-align: center;
  margin-bottom: 1rem;
}

[aria-label="gallery"] {
  border: 2px solid;
  overflow-x: scroll;
  scroll-snap-type: mandatory; 
  scroll-snap-points-x: repeat(100%);
}

[aria-label="gallery"]:focus {
  outline: 4px solid DodgerBlue;
  outline-offset: -6px;
}

[aria-label="gallery"] ul {
  display: flex;
}

[aria-label="gallery"] li {
  list-style: none;
  flex: 0 0 100%;
  padding: 2rem;
  text-align: center;
}

[aria-label="gallery"] figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 50vh;
}

[aria-label="gallery"] figcaption {
  padding: 0.5rem;
  font-style: italic;
}

[aria-label="gallery"] img {
  max-height: calc(100% - 2rem);
  max-width: 100%;
  margin-top: 2rem;
}

#instructions p {
  padding: 1rem;
  text-align: center;
  color: #fefefe;
  background-color: #111;
}

#focus, #hover, #hover-and-focus, #touch {
  display: none;
}

[aria-label="gallery"]:focus + #instructions #focus,
[aria-label="gallery"]:hover + #instructions #hover {
  display: block;
}

[aria-label="gallery"]:hover + #instructions #hover + #focus {
  display: none;
}

[aria-label="gallery"]:hover:focus + #instructions #hover, 
[aria-label="gallery"]:hover:focus + #instructions #focus {
  display: none;
}

[aria-label="gallery"]:hover:focus + #instructions #hover-and-focus {
  display: block;
}

#instructions svg {
  height: 1.5rem;
  width: 1.5rem;
  fill: #fff;
  vertical-align: -0.5rem;
}

.touch #instructions p {
  display: none !important;
}

.touch #instructions #touch {
  display: block !important;
}

window.addEventListener('touchstart', function touched() {
  document.body.classList.add('touch')
  window.removeEventListener('touchstart', touched, false)
}, false)