Kölner Geflügel

by Rolf

HTML

<h1>Kölner Ansichten</h1>
<ul class="gallery">
<li>
  <figure>
    <button type="button">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/56/Fluegelauto_Koeln.jpg/320px-Fluegelauto_Koeln.jpg">
    </button>
    <figcaption>Flügelauto</figcaption>
  </figure>
</li>
<li>
  <figure>
    <button type="button">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/be/Stadtbild_K%C3%B6ln_%2850MP%29.jpg/320px-Stadtbild_K%C3%B6ln_%2850MP%29.jpg">
    </button>
    <figcaption>Hohenzollernbrücke</figcaption>
  </figure>
</li>
<li>
  <figure>
    <button type="button">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8e/Bundesarchiv_B_422_Bild-0086%2C_K%C3%B6ln%2C_Rheinufer%2C_Hochwasser.jpg/236px-Bundesarchiv_B_422_Bild-0086%2C_K%C3%B6ln%2C_Rheinufer%2C_Hochwasser.jpg">
    </button>
    <figcaption>Huhwasser</figcaption>
  </figure>
</li>
<li>
  <figure>
    <button type="button">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2b/Roman_Cologne%2C_reconstruction.JPG/640px-Roman_Cologne%2C_reconstruction.JPG">
    </button>
    <figcaption>Römische Stadt</figcaption>
  </figure>
</li>
<li>
  <figure>
    <button type="button">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/98/A_Plan_of_the_City_of_Cologne%2C_1800%2C_John_Stockdale-9832.jpg/320px-A_Plan_of_the_City_of_Cologne%2C_1800%2C_John_Stockdale-9832.jpg">
    </button>
    <figcaption>Im Mittelalter</figcaption>
  </figure>
</li>
</ul>
<p>
Alle Bilder aus dem Artikel "Köln" der deutschen Wikipedia
</p>

CSS

.gallery {
  list-style-type: none;
  padding: 0;
  display: flex; 
  flex-flow: row wrap;
}

.gallery button {
  background-color: transparent;
  border: none;
  padding: 0.2em; margin: 0;
}

.gallery img {
  transition: transform ease-in-out 1s;
  height: 10em;
}
.gallery button:focus img {
  transform: scale(1.4) translateY(0.5em);
}