13.03.2025

Exibindo Texto ao Passar o Mouse Sobre uma Imagem: HTML e CSS

Resumo Rápido

Para exibir texto sobre uma imagem quando o ponteiro passa sobre ela, posicionamos o texto absolutamente dentro de um contêiner pai que é posicionado de forma relativa e controlamos a visibilidade do elemento ao passar o mouse. Veja como isso funciona na prática:

HTML:

<div class="img-wrap">
  <img src="imagem.jpg" alt="Uau! Olhe para esta imagem">
  <p class="overlay">Texto sobre a imagem? Magia!</p>
</div>

CSS:

.img-wrap { position: relative; }
.overlay {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: none;
}
.img-wrap:hover .overlay { 
  display: block;
}

O elemento .overlay está oculto até que o ponteiro esteja sobre a .img-wrap, momento em que se torna visível usando display: block. Esta é uma maneira simples e eficaz de criar um efeito de hover interessante.

Aprimorando o Texto ao Passar o Mouse: Ajuste de Foco

Para refinar nosso truque, considere algumas dicas e técnicas para melhorar o efeito de hover e aprimorar a experiência do usuário:

Aparição Suave do Texto com Transições CSS

Adicione um toque de elegância ao efeito com as transições CSS. Ajuste a opacidade e a visibilidade usando transition para fazer o texto aparecer suavemente:

.overlay {
  transition: opacity 0.5s, visibility 0.5s;  
  opacity: 0;
  visibility: hidden;
}
.img-wrap:hover .overlay {
  opacity: 1;   
  visibility: visible;
}

Ajuste de Foco com Colocação Inline

Se você precisar alinhar a imagem com outros elementos, defina .img-wrap como display: inline-block:

.img-wrap { display: inline-block; vertical-align: bottom; }

Centralização Perfeita do Texto

Para uma centralização precisa do texto, use transform. Adicione line-height e text-align: center para melhorar a legibilidade do texto.

Posicionamento Preciso do Texto Oculto

O uso adequado de position: absolute garante a sobreposição correta do texto. É importante definir tamanhos para manter a estrutura do layout.

Preparação para o Cenário de Imagem Não Carregada

Sempre forneça uma fallback caso a imagem não carregue. O texto deve permanecer acessível e a estrutura do layout deve permanecer intacta.

Visualização

Para ilustrar visualmente o conceito de exibir texto ao passar o mouse sobre uma imagem, pode ser descrito da seguinte forma:

Estado Normal:

🏞️       <--- A imagem existe na página sem qualquer interação.

Estado de Hover:

🚤💨       <--- O cursor, como um barco veloz, aciona a dinâmica.

Descobrindo o Oculto:

🏞️ 🚤💨
💎       <--- Sob a ação do cursor, o texto oculto é revelado como um tesouro descoberto através da interação.

Confie no poder do CSS para esconder o texto nas "profundezas" da imagem e revelá-lo elegantemente ao passar o mouse.

Dicas para um Efeito de Hover Ideal

Um excelente efeito de hover requer consideração cuidadosa e leva em conta vários cenários de uso. Aqui estão algumas dicas profissionais para alcançar a excelência:

Dominando Atributos Essenciais: title e alt

Esses atributos HTML são fundamentais para implementar tooltips simples e garantir a acessibilidade da imagem.

Responsividade e Sobreposições de Texto

Assegure-se de que o uso de efeitos de hover cause uma impressão positiva em todos os dispositivos, com o texto permanecendo bem formatado em diferentes telas.

Elementos Contêiner para Controle do Efeito

Usar um elemento contêiner fornece melhor controle sobre o efeito de hover, mantendo a estrutura do layout.

Conformidade com Padrões de Acessibilidade Web

Ao criar efeitos de hover, siga os padrões de acessibilidade web para garantir uma experiência confortável ao usuário e a disponibilidade de navegação por teclado.

Materiais Úteis

1. Opacidade / Transparência de Imagens CSS — Princípios básicos para criar efeitos de hover em CSS.
2. Como afetar outros elementos quando um elemento está sob hover - Stack Overflow — Discussão sobre interações de hover.
3. Pseudo-elementos - CSS: Folhas de Estilo em Cascata | MDN — Uso avançado de pseudo-elementos para efeitos de hover.
4. :hover | CSS-Tricks - CSS-Tricks — Análise detalhada da pseudo-classe :hover.
5. A Propriedade CSS Z-Index: Uma Análise Abrangente — Smashing Magazine — Gerenciando sobreposições de elementos com z-index.
6. Aprenda a Codificar em HTML & CSS — Guia introdutório para iniciantes sobre como criar efeitos de hover em HTML & CSS.
7. Entendendo o Critério de Sucesso 1.4.13: Conteúdo ao Passar o Mouse ou Focar | WAI | W3C — Orientações para atender aos padrões de acessibilidade web para efeitos de hover.

Video

Navigation