CSS-Bildergalerie


Inhaltsverzeichnis

    Inhaltsverzeichnis anzeigen


Mit CSS kann eine Bildergalerie erstellt werden.

Cinque Terre
Add a description of the image here
Forest
Add a description of the image here
Northern Lights
Add a description of the image here
Mountains
Add a description of the image here

Bildergalerie

Folgende Bildergalerie wird 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="img_5terre.jpg">
    
  <img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
  
  </a>
  <div class="desc">Add a description of the image 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 a description of the image 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 a description of the image 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 a description of the image here</div>
  </div>

</body>
</html>

Probieren Sie es selbst aus →

<!DOCTYPE html>
<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="img_5terre.jpg">
    <img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
  </a>
  <div class="desc">Add a description of the image 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 a description of the image 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 a description of the image 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 a description of the image here</div>
</div>

</body>
</html>



Mehr Beispiele

Responsive Bildergalerie

So verwenden Sie CSS-Medienabfragen, um eine responsive Bildergalerie zu erstellen sehen auf Desktops, Tablets und Smartphones gut aus.

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
div.gallery {
  border: 1px solid #ccc;
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  width: 100%;
  height: auto;
}

div.desc {
  padding: 15px;
  text-align: center;
}

* {
  box-sizing: border-box;
}

.responsive {
  padding: 0 6px;
  float: left;
  width: 24.99999%;
}

@media only screen and (max-width: 700px) {
  .responsive {
    width: 49.99999%;
    margin: 6px 0;
  }
}

@media only screen and (max-width: 500px) {
  .responsive {
    width: 100%;
  }
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}
</style>
</head>
<body>

<h2>Responsive Image Gallery</h2>

<h4>Resize the browser window to see the effect.</h4>

<div class="responsive">
  <div class="gallery">
    <a target="_blank" href="img_5terre.jpg">
      <img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>
</div>


<div class="responsive">
  <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 a description of the image here</div>
  </div>
</div>

<div class="responsive">
  <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 a description of the image here</div>
  </div>
</div>

<div class="responsive">
  <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 a description of the image here</div>
  </div>
</div>

<div class="clearfix"></div>

<div style="padding:6px;">
  <p>This example use media queries to re-arrange the images on different screen sizes: for screens larger than 700px wide, it will show four images side by side, for screens smaller than 700px, it will show two images side by side. For screens smaller than 500px, the images will stack vertically (100%).</p>
  <p>You will learn more about media queries and responsive web design later in our CSS Tutorial.</p>
</div>

</body>
</html>


Erweitert: Anklickbare modale Bilder (JS)

Ein Beispiel für die Verwendung von JavaScript zusammen mit CSS zur Anzeige angeklickter Bilder in einer modalen Box.

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
/* The Image Box */
div.img {
  border: 1px solid #ccc;
}

div.img:hover {
  border: 1px solid #777;
}

/* The Image */
div.img img {
  width: 100%;
  height: auto;
  cursor: pointer;
}

/* Description of Image */
div.desc {
  padding: 15px;
  text-align: center;
}

* {
  box-sizing: border-box;
}

/* Add Responsiveness */
.responsive {
  padding: 0 6px;
  float: left;
  width: 24.99999%;
}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
}

/* Caption of Modal Image */
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

/* Add Animation */
.modal-content, #caption {  
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from {transform:scale(0)} 
  to {transform:scale(1)}
}

@keyframes zoom {
  from {transform:scale(0.1)} 
  to {transform:scale(1)}
}

/* The Close Button */
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/* Responsive Columns */
@media only screen and (max-width: 700px){
  .responsive {
    width: 49.99999%;
    margin: 6px 0;
  }
  .modal-content {
    width: 100%;
  }
}

@media only screen and (max-width: 500px){
  .responsive {
    width: 100%;
  }
}

/* Clear Floats */
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}
</style>
</head>
<body>

<h2 style="text-align:center">Advanced Image Gallery</h2>

<div class="responsive">
  <div class="img">
    <img src="img_5terre.jpg" alt="Cinque Terre" width="300" height="200">
    <div class="desc">Cinque Terre</div>
  </div>
</div>


<div class="responsive">
  <div class="img">
    <img src="img_forest.jpg" alt="Forest" width="300" height="200">
    <div class="desc">Forest Bridge</div>
  </div>
</div>

<div class="responsive">
  <div class="img">
    <img src="img_lights.jpg" alt="Northern Lights" width="300" height="200">
    <div class="desc">Northern Lights, Norway</div>
  </div>
</div>

<div class="responsive">
  <div class="img">
    <img src="img_mountains.jpg" alt="Mountains" width="300" height="200">
    <div class="desc">Beautiful Mountains</div>
  </div>
</div>

<div class="clearfix"></div>

<!-- The Modal -->
<div id="myModal" class="modal">
  <span class="close">�</span>
  <img class="modal-content" id="img01">
  <div id="caption"></div>
</div>

<script>
// Get the modal
var modal = document.getElementById('myModal');

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on <span> (x), close the modal
span.onclick = function() { 
  modal.style.display = "none";
}

// Get all images and insert the clicked image inside the modal
// Get the content of the image description and insert it inside the modal image caption
var images = document.getElementsByTagName('img');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
var i;
for (i = 0; i < images.length; i++) {
  images[i].onclick = function(){
    modal.style.display = "block";
    modalImg.src = this.src;
    modalImg.alt = this.alt;
    captionText.innerHTML = this.nextElementSibling.innerHTML;
  }
}
</script>

<div style="padding:6px;">
  <p>This example combines CSS (animation and media queries) and JavaScript, to create a responsive image gallery that will enlarge an image when it is clicked on.</p>
</div>

</body>
</html>