CSS-bildgalleri

CSS kan användas för att skapa bildgalleri.

Gula tulpan
Gula tulpan
Röd tulpan
Röd tulpan
Blommor och växter
Blommor och växter
Blommor och växter
Blommor och växter

Bildgalleri

Nedanstående bildgalleri är skapat med CSS:

Exempel

<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">Add image description here</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">Add image description here</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">Add image description here</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">Add image description here</div>
</div>
</body>
</html>

Try it yourself

More examples

Responsive image gallery
How to use CSS media queries to create a responsive image gallery that looks good on desktops, tablets, and smartphones.