Bibliothèque d'images CSS

CSS peut être utilisé pour créer des galeries d'images.

Tulipes jaunes
Tulipes jaunes
Tulipes rouges
Tulipes rouges
Plantes et fleurs
Plantes et fleurs
Plantes et fleurs
Plantes et fleurs

Galerie d'images

La galerie d'images suivante est créée à l'aide de CSS :

Exemple

<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">Ajoutez ici une description d'image</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">Ajoutez ici une description d'image</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">Ajoutez ici une description d'image</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">Ajoutez ici une description d'image</div>
</div>
</body>
</html>

Essayez-le vous-même

Plus d'exemples

Bibliothèque de gallery réactive
Comment créer une bibliothèque de gallery réactive avec CSS média queries pour qu'elle soit belle sur ordinateur, tablette et smartphone.