Como Criar Imagens com Zoom e Ícone Flutuante em HTML5 e CSS3

Neste tutorial, você vai aprender passo a passo como criar miniaturas interativas que ampliam ao passar o mouse ou tocar na tela — e exibem um pequeno ícone de link 🔗, indicando que a imagem leva a uma página externa.

1. Estrutura HTML

Use a estrutura abaixo para criar a imagem com o efeito:

<a href="https://agenciabrasil.ebc.com.br/justica/noticia/2025-08/pf-e-cgu-apuram-irregularidades-em-antiga-pasta-de-damares-alves" target="_blank">
  <span class="zoom-container">
    <img src="https://imagens.ebc.com.br/leF7VkM7-EWDBlUc_0E6bMfY51w=/1170x700/smart/https://agenciabrasil.ebc.com.br/sites/default/files/thumbnails/image/programa_de_protecao_e_promocao_da_saude_menstrual_fcpzzb_abr_2311222306_0.jpg?itok=cGyjM6GE" 
         alt="Damares Alves" class="zoom-img">
    <span class="zoom-caption">🔗</span>
  </span>
  PF e CGU apuram irregularidades em antiga pasta de Damares Alves.
</a>

2. CSS do Efeito

O CSS controla o comportamento do zoom, o brilho e o ícone flutuante. Ele está localizado no arquivo style-biografias.css, mas pode ser incluído dentro de uma tag <style>.

.zoom-container:hover .zoom-img {
  transform: scale(2.4);
  box-shadow: 0 0 25px rgba(0, 180, 255, 0.45);
}
.zoom-caption {
  position: absolute;
  top: 5px;
  right: 5px;
  font-size: 18px;
  color: rgba(255,255,255,0.95);
  background: rgba(0,0,0,0.45);
  border-radius: 6px;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.zoom-container:hover .zoom-caption {
  opacity: 1;
  background: rgba(0,80,150,0.7);
}

3. Script para dispositivos móveis (opcional)

<script>
document.addEventListener('DOMContentLoaded', function(){
  document.querySelectorAll('.zoom-img').forEach(function(img){
    img.addEventListener('click', function(e){
      e.stopPropagation();
      this.classList.toggle('zoomed');
    });
  });
  document.addEventListener('click', function(){
    document.querySelectorAll('.zoom-img.zoomed').forEach(function(img){
      img.classList.remove('zoomed');
    });
  });
});
</script>

4. Resultado Final

O resultado é uma miniatura elegante, com zoom suave e um ícone 🔗 que aparece ao passar o mouse, indicando claramente que a imagem é clicável.

🔗

Você pode aplicar esse mesmo efeito em fotos, vídeos ou cartões informativos — mantendo o padrão visual e a elegância do site Gospel Life.