CSS Billedbibliotek

CSS kan bruges til at oprette billedgallerier.

Gule tulipaner
Gule tulipaner
Røde tulipaner
Røde tulipaner
Blomster og græs
Blomster og græs
Blomster og græs
Blomster og græs

Billedgalleri

Denne billedgalleri er oprettet ved hjælp af CSS:

Eksempel

<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">Tilføj billedbeskrivelse her</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">Tilføj billedbeskrivelse her</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">Tilføj billedbeskrivelse her</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">Tilføj billedbeskrivelse her</div>
</div>
</body>
</html>

Prøv det selv

Flere eksempler

Responsivt billedgalleri
Lær, hvordan du bruger CSS medieforespørgsler til at oprette en responsiv billedgalleri, der ser godt ud på skrivebord, tablet og smartphone.