<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>
[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: 60vh;
}

/* 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;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.