<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Galeria de Imagens</title>
<style>
body {
margin: 0;
padding: 0;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 70%;
margin: 0 auto;
padding: 20px;
}
.image-container {
width: calc(33.33% - 20px);
margin: 10px;
position: relative;
}
.image-container img {
width: 100%;
height: auto;
border-radius: 10px;
cursor: pointer;
transition: transform 0.2s;
}
.image-container img:hover {
transform: scale(1.1);
}
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 100;
}
.modal-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
padding: 20px;
border-radius: 10px;
width: 70%;
max-height: 90%;
overflow: auto;
}
.modal-content img {
width: 100%;
height: auto;
border-radius: 10px;
}
.close {
position: absolute;
top: 10px;
right: 10px;
font-size: 20px;
cursor: pointer;
}
@media (max-width: 768px) {
.container {
width: 100%;
flex-direction: column;
}
.image-container {
width: 100%;
margin: 10px 0;
}
}
</style>
</head>
<body>
<div class="container">
<div class="image-container">
<img src="https://picsum.photos/200/300" alt="Imagem 1">
</div>
<div class="image-container">
<img src="https://picsum.photos/200/300" alt="Imagem 2">
</div>
<div class="image-container">
<img src="https://picsum.photos/200/300" alt="Imagem 3">
</div>
<div class="image-container">
<img src="https://picsum.photos/200/300" alt="Imagem 4">
</div>
<div class="image-container">
<img src="https://picsum.photos/200/300" alt="Imagem 5">
</div>
<div class="image-container">
<img src="https://picsum.photos/200/300" alt="Imagem 6">
</div>
<div class="image-container">
<img src="https://picsum.photos/200/300" alt="Imagem 7">
</div>
<div class="image-container">
<img src="https://picsum.photos/200/300" alt="Imagem 8">
</div>
<div class="image-container">
<img src="https://picsum.photos/200/300" alt="Imagem 9">
</div>
<div class="image-container">
<img src="https://picsum.photos/200/300" alt="Imagem 10">
</div>
<div class="image-container">
<img src="https://picsum.photos/200/300" alt="Imagem 11">
</div>
<div class="image-container">
<img src="https://picsum.photos/200/300" alt="Imagem 12">
</div>
</div>
<div class="modal">
<div class="modal-content">
<span class="close">×</span>
<img src="" id="modal-image">
</div>
</div>
<script>
const images = document.querySelectorAll(".image-container img");
const modal = document.querySelector(".modal");
const modalContent = document.querySelector(".modal-content");
const modalImage = document.getElementById("modal-image");
const close = document.querySelector(".close");
images.forEach(image => {
image.addEventListener("click", () => {
modalImage.src = image.src;
modal.style.display = "block";
});
});
close.addEventListener("click", () => {
modal.style.display = "none";
});
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</body>
</html>
Html
Explicação do código:
Estrutura HTML:
O código HTML cria uma div container para conter as imagens e utiliza flexbox para o layout responsivo.
A container possui width: 70% para ocupar 70% da largura útil da tela em computadores.
Cada imagem é inserida em uma div image-container.
É criada uma div modal para exibir a imagem em tamanho maior, com um elemento close para fechar o modal.
CSS:
Estilos básicos são aplicados ao corpo, container e image-container.
As imagens são configuradas com border-radius para cantos arredondados.
Um efeito hover é adicionado às imagens, aplicando uma escala para aumentar o tamanho delas ao passar o mouse por cima.
Estilos são definidos para o modal, incluindo um fundo escuro com um conteúdo branco (modal-content) e um botão de fechar (close).
JavaScript:
O script seleciona todos os elementos img e adiciona um evento de clique a cada um.
Quando uma imagem é clicada, o script define o src da imagem no modal para a mesma imagem clicada, ajusta o display do modal para block e exibe o modal.
O botão de fechar (close) é configurado para esconder o modal.
Um evento onclick é adicionado à janela para fechar o modal quando o usuário clicar fora dele.
Recursos adicionais:
Imagens de exemplo: Usei a API picsum.photos para gerar imagens de exemplo. Você pode usar suas próprias imagens ou outras APIs de imagens gratuitas.
Flexbox: A propriedade flexbox é essencial para o layout responsivo da página.
Você pode aprender mais sobre Flexbox na documentação do MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout
Lembre-se de substituir as imagens de exemplo por suas próprias imagens.
[complemento da resposta original]
Ajuste:
width: 70%; na modal-content: Essa linha foi adicionada para definir a largura do conteúdo do modal como 70% da largura da tela.
Agora, quando você clicar em uma imagem, ela será exibida em um modal ocupando 70% da largura da tela, proporcionando uma visualização mais adequada.