Referencial de Atividades
Todas as atividades
Exibição Visual

Colagem

Apresenta múltiplas imagens em composição visual única. Cada imagem pode ter legenda e ser clicável para revelar detalhes. Cria impacto visual imediato com múltiplos exemplos.

Conhecimento colagem imagens galeria collage

Experimente

Fenômenos Naturais Espetaculares

Clique em cada item para ver o detalhe

Código-fonte

PHP

Dados de exemplo

Seis a nove itens é a faixa ideal — menos que isso não cria efeito de variedade, mais que isso fragmenta demais a atenção. Cada item tem imagem, legenda curta (sempre visível) e um detalhe mais longo (só aparece ao clicar).

1 <?php
2 $titulo = 'Biomas do Brasil';
3 $itens = [
4 ['imagem' => 'amazonia.jpg', 'legenda' => 'Amazônia', 'detalhe' => 'Maior floresta tropical do planeta, com a maior biodiversidade entre os biomas brasileiros e um papel central na regulação do clima global.'],
5 ['imagem' => 'cerrado.jpg', 'legenda' => 'Cerrado', 'detalhe' => 'Savana tropical com vegetação retorcida adaptada ao fogo periódico; berço de nascentes que abastecem as principais bacias hidrográficas do país.'],
6 ['imagem' => 'caatinga.jpg', 'legenda' => 'Caatinga', 'detalhe' => 'Único bioma exclusivamente brasileiro, com plantas e animais adaptados à seca prolongada — muitas espécies perdem as folhas na estiagem.'],
7 ['imagem' => 'mata-atlantica.jpg', 'legenda' => 'Mata Atlântica', 'detalhe' => 'Um dos biomas mais devastados do mundo, hoje reduzido a fragmentos, mas ainda com altíssima taxa de espécies que não existem em nenhum outro lugar.'],
8 ['imagem' => 'pantanal.jpg', 'legenda' => 'Pantanal', 'detalhe' => 'Maior planície alagável do planeta; o ciclo anual de cheia e seca renova o solo e sustenta uma das maiores concentrações de fauna silvestre da América do Sul.'],
9 ['imagem' => 'pampa.jpg', 'legenda' => 'Pampa', 'detalhe' => 'Campos abertos de vegetação rasteira no extremo sul do país, moldados historicamente pelo pastoreio e pela criação extensiva de gado.'],
10 ];
11 ?>

Grade de itens

Cada item é um botão (não um <div>) porque revela conteúdo ao clique — um <div> exigiria papel e atributos de acessibilidade extras que o <button> já traz de graça. A imagem vem antes da legenda na ordem do HTML, o que importa para o CSS do próximo bloco.

1 <div class="colagem">
2 <div class="cabecalho">
3 <p class="titulo"><?= htmlspecialchars($titulo) ?></p>
4 <p class="instrucao">Clique em cada item para ver o detalhe</p>
5 </div>
6 <div class="grade">
7 <?php foreach ($itens as $item): ?>
8 <button type="button" class="item">
9 <img class="imagem" src="<?= htmlspecialchars($item['imagem']) ?>" alt="<?= htmlspecialchars($item['legenda']) ?>">
10 <div class="texto">
11 <p class="legenda"><?= htmlspecialchars($item['legenda']) ?></p>
12 <p class="detalhe oculto"><?= htmlspecialchars($item['detalhe']) ?></p>
13 </div>
14 </button>
15 <?php endforeach; ?>
16 </div>
17 </div>
CSS

Cartão

Contêiner geral, com o cabeçalho separado da grade por uma linha divisória.

1 .colagem {
2 border: 1px solid #e2e8f0;
3 border-radius: 16px;
4 overflow: hidden;
5 font-family: inherit;
6 }
7
8 .cabecalho {
9 padding: 20px 24px;
10 text-align: center;
11 background: #f1f5f9;
12 border-bottom: 1px solid #cbd5e1;
13 }
14 .titulo {
15 margin: 0;
16 font-size: 18px;
17 font-weight: 700;
18 color: #0f172a;
19 }
20 .instrucao {
21 margin: 6px 0 0;
22 font-size: 12px;
23 color: #64748b;
24 }

Grade de itens

Grid comum, sem altura fixa por linha — cada linha cresce até o item mais alto dela. Isso é intencional (é assim que a imagem clicada "empurra" a caixa pra revelar o detalhe), mas tem uma consequência tratada no próximo bloco.

1 .grade {
2 display: grid;
3 grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
4 gap: 12px;
5 padding: 20px;
6 }

Item da colagem

Por padrão, um <button> centraliza o próprio conteúdo verticalmente quando a caixa fica mais alta que o conteúdo — é assim que o navegador estiliza botões, não uma regra deste CSS. Como o item da linha ao lado pode ficar mais alto (o detalhe dele abriu), o grid estica TODOS os itens daquela linha pra mesma altura — e sem "flex-direction: column" aqui, a imagem deste item deslizaria para o centro da caixa esticada, em vez de continuar no topo. display:flex + flex-direction:column resolve isso: o espaço sobrando vai para o final da caixa, não ao redor do conteúdo.

1 .item {
2 display: flex;
3 flex-direction: column;
4 align-items: stretch;
5 text-align: left;
6 border: 1px solid #cbd5e1;
7 border-radius: 12px;
8 overflow: hidden;
9 background: #f8fafc;
10 padding: 0;
11 cursor: pointer;
12 transition: border-color 0.15s ease;
13 }
14 .item:hover {
15 border-color: #6366f1;
16 }
17 .item:focus-visible {
18 outline: 2px solid #6366f1;
19 outline-offset: 2px;
20 }
21
22 .imagem {
23 width: 100%;
24 aspect-ratio: 1 / 1;
25 object-fit: cover;
26 flex-shrink: 0;
27 }
28
29 .texto {
30 padding: 12px;
31 }
32 .legenda {
33 margin: 0 0 4px;
34 font-size: 14px;
35 font-weight: 600;
36 color: #1e293b;
37 }

Detalhe (oculto até o clique)

display:none em vez de visibility/opacity — o texto não deve ocupar espaço nem ser lido por leitor de tela antes do clique.

1 .detalhe {
2 margin: 0;
3 font-size: 12px;
4 line-height: 1.6;
5 color: #64748b;
6 }
7 .detalhe.oculto {
8 display: none;
9 }
JavaScript

Alternar detalhe

Cada item guarda o próprio parágrafo de detalhe — clicar em um não afeta os outros, então não precisa fechar nada antes de abrir (diferente de um acordeão, onde só um item fica aberto por vez).

1 document.addEventListener('DOMContentLoaded', function () {
2 document.querySelectorAll('.colagem .item').forEach(function (item) {
3 item.addEventListener('click', function () {
4 var detalhe = item.querySelector('.detalhe');
5 detalhe.classList.toggle('oculto');
6 });
7 });