Galeria de Fotos Responsiva Flexbox

Como Colocar ícones de Redes Sociais no HTML

Card Css com Efeitos Overlay

Postado: 27 de março de 2025 Tempo de Leitura: 3 Minutos

Neste artigo vamos criar uma Galeria de Fotos Responsiva Flexbox com a opção de ampliar ao clicar na foto.

Estrutura Base que vamos usar no projeto!

A estrutura base do nosso pequeno projeto para a Galeria de fotos vai ser composta por apenas dois arquivos, por ser apenas dois arquivos, não será algo muito complexo de realizar, o primeiro arquivo será o index.html e o segundo style.css

Portanto, crie uma pasta CSS, para inserir o arquivo style.css, a mesma regra serve se você estiver usando scripts crie pastas para organizar o seu projeto seja qual for organização é fundamental para organização e manutenção no futuro.

Nesta seção, projetaremos uma estrutura simples nas tags <figure>, <img>, <figcaption> e a tag <a> para inserirmos o link de destino.

Essa tag que usaremos para criar os Galeria de Fotos Responsiva Flexbox.

A primeira coisa que você deve fazer é colocar todas as tags básicas que são essenciais independente de qual projeto esteja sendo desenvolvido.

Nesta seção, usaremos algumas as tags HTML para montar a estrutura da nossa Galeria de Fotos.

Estrutura Código Html:

HTML

<div class="gallery">

    <figure class="galleryItem">
        <a href="#"><img src="uploads/foto1.jpg" alt="Londres"></a>
        <figcaption>Londres</figcaption>
    </figure>

    <figure class="galleryItem">
        <a href="#"><img src="uploads/foto2.jpg" alt="Ponte Golden Gate"></a>
        <figcaption>Ponte Golden Gate</figcaption>
    </figure>

    <figure class="galleryItem">
        <a href="#"><img src="uploads/foto3.jpg" alt="Nova York"></a>
        <figcaption>Nova York</figcaption>
    </figure>

    <figure class="galleryItem">
        <a href="#"><img src="uploads/foto1.jpg" alt="Londres"></a>
        <figcaption>Londres</figcaption>
    </figure>

    <figure class="galleryItem">
        <a href="#"><img src="uploads/foto3.jpg" alt="Nova York"></a>
        <figcaption>Nova York</figcaption>
    </figure>

    <figure class="galleryItem">
        <a href="#"><img src="uploads/foto2.jpg" alt="Ponte Golden Gate"></a>
        <figcaption>Ponte Golden Gate</figcaption>
    </figure>


</div><!--Gallery-->

Estrutura Código CSS

Para conseguirmos o efeito desejado na galeria, vamos adicionar algumas propriedades CSS para as tags que foram colocadas na sessão HTML que usamos.

Portanto, você pode criar um arquivo style.css, coloque todo o código que se encontra logo mais abaixo.

Nesta seção, usaremos algumas propriedades CSS para estilizar a Galeria.

CSS

.gallery {
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
  align-items: stretch;
  width: 100%;
  margin: auto;
}

.gallery .galleryItem {
  flex: 1 1 auto;
  margin: 0.3em;
  border: 1px solid #dddddd;
  border-radius: 6px;
  position: relative;
  width: 12em;
  height: 13em;
  overflow: hidden;
}

@media (min-width: 40em) {
  .gallery .galleryItem {
    width: 10em;
    height: 10em;
  }
}

@media (min-width: 80em) {
  .gallery .galleryItem {
    width: 17em;
    height: 17em;
  }
}

.gallery .galleryItem:hover img {
  transform: scale(1.2);
}

.gallery a {
  display: block;
  width: 100%;
  height: 100%;
}

.gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.2s;
}

.gallery figcaption {
  background-color: rgba(0, 0, 0, 0.4);
  color: #fff;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1em;
}

.lightBoxOverlay {
  display: block;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.8);
}

.lightBoxOverlay .closeButton {
  position: absolute;
  top: 0.5em;
  right: 0.5em;
  color: #000;
  background-color: #fff;
  font-size: 1.5em;
  border-radius: 1em;
  padding: 0.44em 0.66em;
  height: 2em;
  width: 2em;
  cursor: pointer;
  transition: 0.2s;
}

.lightBoxOverlay .closeButton:hover {
  color: #fff;
  background-color: #000;
}

@media (min-width: 80em) {
  .lightBoxOverlay .closeButton {
    font-size: 2em;
    top: 1em;
    right: 1em;
    height: 2em;
    width: 2em;
  }
}

.lightBoxOverlay .container-galeria {
  margin: 0;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 1em;
}

@media (min-width: 40em) {
  .lightBoxOverlay .container-galeria {
    padding: 3em;
  }
}

@media (min-width: 80em) {
  .lightBoxOverlay .container-galeria {
    padding: 5em;
  }
}

.lightBoxOverlay img {
  max-width: 100%;
  max-height: 100%;
}

.lightBoxOverlay figcaption {
  margin-top: 1em;
  padding: 0.5em 1em;
  color: #fff;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 5em;
}

Vamos adicionar mais uma sessão para ampliar a imagem quando clicarmos na foto.

JavaScript

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script type="text/javascript">
    
    let galleryItems = document.querySelectorAll('.galleryItem');

    const closeLightBox = (galleryItem, overlay) => {
        let originLinkTag = galleryItem.querySelector('a');
        let image = overlay.querySelector('img');
        let caption = overlay.querySelector('figcaption');    
        
        // move image and caption back to their original parents
        originLinkTag.appendChild(image);
        galleryItem.appendChild(caption);
        
        // remove the light box overlay
        document.body.removeChild(overlay)
    }

    const openLightBox = (galleryItem) => {
        // create the overlay to darken the page
        let lightBoxOverlay = document.createElement('div');
        lightBoxOverlay.classList.add('lightBoxOverlay');

        // create the close button
        let lightBoxClose = document.createElement('a');
        lightBoxClose.innerText = 'X';
        lightBoxClose.classList.add('closeButton');
        lightBoxOverlay.appendChild(lightBoxClose);    

        // create a container for the image
        let lightBoxImageContainer = document.createElement('figure');
        lightBoxImageContainer.classList.add('container-galeria');
        lightBoxOverlay.appendChild(lightBoxImageContainer);

        // take the already existing image and move it into the overlay container
        let image = galleryItem.querySelector('img');
        lightBoxImageContainer.appendChild(image);
        
        // take the already existing figcaption and move it into the overlay container
        let caption = galleryItem.querySelector('figcaption');
        lightBoxImageContainer.appendChild(caption);
        
        // add a closing routine to close button
        lightBoxClose.addEventListener('click', (e) => {
            e.preventDefault();
            closeLightBox(galleryItem, lightBoxOverlay);
        });
        
        // display the overlay
        document.body.appendChild(lightBoxOverlay);
    }

    galleryItems.forEach(el => {
        let linkTag = el.querySelector('a');
        linkTag.addEventListener('click', (e) => {
            e.preventDefault();
            openLightBox(el);
        });
    });

</script>

Combinando as Duas seções acima com Html e Css temos o seguinte Resultado!

Veja o Resultado baixo!