CSS Afbeeldingsbibliotheek

CSS kan gebruikt worden om een afbeeldingsgalerij te maken.

Geel tulband
Geel tulband
Rood tulband
Rood tulband
Planten en bloemen
Planten en bloemen
Planten en bloemen
Planten en bloemen

Afbeeldingsgalerij

Hieronder is een afbeeldingsgalerij die is gemaakt met CSS:

Voorbeeld

<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">Voeg hier een afbeeldingsbeschrijving toe</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">Voeg hier een afbeeldingsbeschrijving toe</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">Voeg hier een afbeeldingsbeschrijving toe</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">Voeg hier een afbeeldingsbeschrijving toe</div>
</div>
</body>
</html>

Probeer het zelf

Meer voorbeelden

Responsieve fotogalerij
Hoe je een responsieve fotogalerij kunt maken met CSS media queries, zodat deze er goed uitziet op desktop, tablet en smartphone.