<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><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="Astronomy and Movement Dada"></li>
    <li><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="Mother"></li>
    <li><img src="https://i.pinimg.com/originals/53/d9/e2/53d9e2cf92b05d3f7ddd903e5c91538a.jpg" alt="untitled"></li>
    <li><img src="https://d32dm0rphc51dk.cloudfront.net/WGpoh18Y3iHXoI9g7rHSBw/large.jpg" alt="The beautiful girl"></li>
  </ul>
</div>
<div class="instructions">
  <p id="hover-and-focus">
    <svg aria-hidden="true" focusable="false"><use xlink:href="#arrow-left"></use></svg>
    scroll or use your arrow keys 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 your arrow keys for more
    <svg aria-hidden="true" focusable="false"><use xlink:href="#arrow-right"/></svg>
  </p>
</div>

[aria-label="gallery"] {
  border: 2px solid;
  padding: 1rem;
  overflow-x: scroll;
}

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

[aria-label="gallery"] ul {
  white-space: nowrap;
}

[aria-label="gallery"] li {
  display: inline-block;
  margin-right: 1rem;
}

[aria-label="gallery"] img {
  max-height: 40vh;
}

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

#focus, #hover, #hover-and-focus {
  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-and-focus {
  display: block;
}

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

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

/* just page styles */

* {
  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;
}