CSS-Bildergalerie

CSS kann verwendet werden, um Bildergalerien zu erstellen.

Gelbe Tulpen
Gelbe Tulpen
Rote Tulpen
Rote Tulpen
Blumen und Gras
Blumen und Gras
Blumen und Gras
Blumen und Gras

Bildergalerie

Nachstehende Bildergalerie wurde mit CSS erstellt:

Beispiel

<html>
<head>
<style>
div.gallery {
  margin: 5px;
  border: 1px solid #ccc;
  float: left;
  width: 180px;
}
div.gallery:hover {
  border: 1px solid #777;
}
div.gallery img {
  width: 100%;
  height: auto;
}
div.desc {
  padding: 15px;
  text-align: center;
}
</style>
</head>
<body>
<div class="gallery">
  <a target="_blank" href="/i/photo/tulip-yellow.jpg">
    <img src="/i/photo/tulip-yellow.jpg" alt="Cinque Terre" width="600" height="400">
  </a>
  <div class="desc">Fügen Sie hier die Bildbeschreibung hinzu</div>
</div>
<div class="gallery">
  <a target="_blank" href="img_forest.jpg">
    <img src="img_forest.jpg" alt="Forest" width="600" height="400">
  </a>
  <div class="desc">Fügen Sie hier die Bildbeschreibung hinzu</div>
</div>
<div class="gallery">
  <a target="_blank" href="img_lights.jpg">
    <img src="img_lights.jpg" alt="Northern Lights" width="600" height="400">
  </a>
  <div class="desc">Fügen Sie hier die Bildbeschreibung hinzu</div>
</div>
<div class="gallery">
  <a target="_blank" href="img_mountains.jpg">
    <img src="img_mountains.jpg" alt="Mountains" width="600" height="400">
  </a>
  <div class="desc">Fügen Sie hier die Bildbeschreibung hinzu</div>
</div>
</body>
</html>

Probieren Sie es selbst aus

Mehr Beispiele

Responsives Bildarchiv
Wie man mit CSS Medienabfragen eine responsive Bildergalerie erstellt, die auf Computern, Tablets und Smartphones gut aussieht.