hera.bloom.
Entrar
Voltar à galeria

Grid com Zoom Interno

Grade de fotos limpa onde o hover dá zoom interno e sobe um overlay com título e local.

CSS / TailwindImagensFácil
Preview ao vivoInterativo
<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <main class="palco">
      <div class="grade">
        <figure class="tile">
          <img src="https://picsum.photos/seed/chale21/600/440" alt="Chalé nos Alpes" />
          <div class="veu">
            <figcaption><strong>Chalé nos Alpes</strong><span>Suíça</span></figcaption>
          </div>
        </figure>
        <figure class="tile">
          <img src="https://picsum.photos/seed/vinhedo7/600/440" alt="Vinhedo ao sol" />
          <div class="veu">
            <figcaption><strong>Vinhedo ao sol</strong><span>Vale do Douro</span></figcaption>
          </div>
        </figure>
        <figure class="tile">
          <img src="https://picsum.photos/seed/gelo33/600/440" alt="Caverna de gelo" />
          <div class="veu">
            <figcaption><strong>Caverna de gelo</strong><span>Islândia</span></figcaption>
          </div>
        </figure>
        <figure class="tile">
          <img src="https://picsum.photos/seed/bazar12/600/440" alt="Bazar de especiarias" />
          <div class="veu">
            <figcaption><strong>Bazar das especiarias</strong><span>Istambul</span></figcaption>
          </div>
        </figure>
        <figure class="tile">
          <img src="https://picsum.photos/seed/moher5/600/440" alt="Penhascos de Moher" />
          <div class="veu">
            <figcaption><strong>Penhascos de Moher</strong><span>Irlanda</span></figcaption>
          </div>
        </figure>
        <figure class="tile">
          <img src="https://picsum.photos/seed/metro48/600/440" alt="Estação de metrô" />
          <div class="veu">
            <figcaption><strong>Metrô art déco</strong><span>Estocolmo</span></figcaption>
          </div>
        </figure>
      </div>
      <p class="dica">passe o mouse nas fotos</p>
    </main>
  </body>
</html>

Efeitos relacionados

carregando

Fotos tingidas em duotones coloridos que revelam as cores reais ao passar o mouse.

Grid Duotone Revelador

CSS / Tailwind

Fotos tingidas em duotones coloridos que revelam as cores reais ao passar o mouse.

carregando

Colunas de fotos que expandem no hover enquanto as vizinhas comprimem, com rótulos de destino.

Accordion de Fotos

CSS / Tailwind

Colunas de fotos que expandem no hover enquanto as vizinhas comprimem, com rótulos de destino.

carregando

Slideshow cinematográfico com zoom e pan lentos, crossfade entre três fotos e legendas sincronizadas.

Slideshow Ken Burns

CSS / Tailwind

Slideshow cinematográfico com zoom e pan lentos, crossfade entre três fotos e legendas sincronizadas.