Ilustração minimalista de uma mulher organizando elementos de um site com um notebook no colo
Freepik/storyset

Atualizado em

Criar uma galeria de imagens para um site é uma maneira eficaz de apresentar uma variedade de fotos em um só lugar. Com a combinação das linguagens de marcação HTML e de estilo CSS, é possível criar uma galeria de imagens elegante e responsiva para melhorar a experiência do usuário.

HTML: a base da galeria de imagens

Antes de começar a trabalhar com CSS, é importante criar a estrutura HTML básica da galeria de imagens. Para isso, você pode utilizar a tag div para criar um container para a galeria, e dentro dessa div, incluir outras divs para cada imagem, com a tag img para inserir a imagem propriamente dita.

Neste exemplo, vamos usar imagens de preenchimento (placeholders) para o código não ficar com um endereço de imagem vazio.

<div class="gallery">
  <div class="image">
    <img src="https://via.placeholder.com/400x400" alt="Descrição da imagem">
  </div>
  <div class="image">
    <img src="https://via.placeholder.com/400x400" alt="Descrição da imagem">
  </div>
  <div class="image">
    <img src="https://via.placeholder.com/400x400" alt="Descrição da imagem">
  </div>
</div>

Observe que cada imagem está envolta em uma div com a classe image. Essa classe será importante para estilizar cada imagem posteriormente com CSS.

CSS: tornando a galeria de imagens atraente

Com a estrutura HTML pronta, é hora de utilizar o CSS para estilizar a galeria de imagens. O primeiro passo é definir as propriedades básicas da galeria, como sua largura e altura.

.gallery {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

Nesse exemplo, definimos que a galeria ocupará 100% da largura disponível, com um máximo de 800px, e estará centralizada na página. Utilizamos as propriedades display: flex e flex-wrap: wrap para permitir que as imagens sejam exibidas lado a lado em várias linhas. Já a propriedade justify-content: center centraliza as imagens horizontalmente dentro da galeria.

Em seguida, podemos definir o estilo para cada imagem individualmente.

.image {
  margin: 10px;
  width: calc(33.33% - 20px);
  overflow: hidden;
}
.image img {
  width: 100%;
  height: auto;
  transition: transform 0.5s;
}
.image:hover img {
  transform: scale(1.1);
}

Aqui, utilizamos a classe image para estilizar cada div que envolve as imagens. Definimos uma margem de 10px para separar cada imagem, e utilizamos a propriedade calc para definir a largura de cada imagem como um terço da largura total da galeria, subtraindo a margem de 10px em cada lado.

Também adicionamos a propriedade overflow: hidden para garantir que as imagens não vazem para fora de suas respectivas divs, e definimos a largura das imagens como 100% para garantir que elas ocupem todo o espaço disponível em suas divs. A propriedade height: auto é utilizada para manter a proporção das imagens.

Por fim, adicionamos um efeito de transição suave para quando o usuário passa o mouse sobre as imagens. Com a propriedade transition: transform 0.5s, definimos que a transformação (no caso, o aumento de escala) será animada durante meio segundo. E com a pseudoclasse :hover, definimos que o efeito de transformação só acontecerá quando o usuário passar o mouse sobre a imagem.

Adaptando a galeria para diferentes tamanhos de tela

Para garantir que a galeria de imagens seja responsiva e se adapte a diferentes dispositivos, podemos adicionar algumas regras de mídia no CSS.

@media screen and (max-width: 768px) {
  .image {
    width: calc(50% - 20px);
  }
}

@media screen and (max-width: 480px) {
  .image {
    width: 100%;
  }
}

Aqui, utilizamos as regras de mídia @media screen and (max-width: XXXpx) para definir estilos específicos para telas menores. Por exemplo, quando a largura da tela é de até 768px, definimos que cada imagem ocupará metade da largura disponível. E quando a largura da tela é de até 480px, definimos que cada imagem ocupará 100% da largura disponível, ou seja, serão exibidas uma abaixo da outra.