Como criar uma galeria de imagens responsiva com HTML e CSS
Com este tutorial, você vai aprender a criar um sequência de imagens com transição automática com poucas linhas de código.
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.