Galeria de imagens CSS

Índice

    Mostrar índice

CSS pode ser usado para criar uma galeria de imagens.

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

Galeria de imagens

A seguinte galeria de imagens é criada com CSS:

Exemplo

<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>

Experimente você mesmo →

<!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>

Mais exemplos

Galeria de imagens responsivas

Como usar consultas de mídia CSS para criar uma galeria de imagens responsiva que irá fica bem em desktops, tablets e smartphones.

Experimente você mesmo →

<!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>

Avançado: imagens modais clicáveis (JS)

Um exemplo de como usar JavaScript junto com CSS para exibir imagens clicadas em uma caixa modal.

Experimente você mesmo →

<!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>