Tutoriais

fevereiro 9, 2026
16:35

Como fazer efeito hover com texto sobre a imagem usando HTML e CSS

Você já navegou em um site onde, ao passar o mouse sobre uma foto, um título ou descrição aparece suavemente? Certamente, esse recurso é uma excelente maneira de economizar espaço e adicionar interatividade ao seu layout. Atualmente, o efeito hover com texto sobre imagem é amplamente utilizado em portfólios, e-commerces e blogs modernos.

Embora pareça algo que exige JavaScript, você pode alcançar um resultado profissional utilizando apenas HTML e CSS puro. Além disso, essa técnica é totalmente responsiva e extremamente leve para o carregamento da página. Neste tutorial, vamos construir esse efeito do zero.

Estrutura de Marcação (HTML)

Primeiramente, precisamos definir como os nossos elementos serão organizados. Para que o texto fique posicionado sobre a imagem, utilizaremos uma div principal que servirá como container. Dessa maneira, conseguiremos controlar o posicionamento absoluto dos elementos internos.

HTML

<div class="card-projeto">
    <img src="sua-imagem.jpg" alt="Descrição da Imagem">
    <div class="overlay">
        <div class="texto">
            <h3>Título do Projeto</h3>
            <p>Descrição curta sobre o que foi feito.</p>
        </div>
    </div>
</div>

Neste código, a classe .overlay será a camada responsável por escurecer a imagem e revelar o texto. Consequentemente, o conteúdo só ficará visível quando o usuário interagir com o elemento.

Estilização e Animação (CSS)

Agora, vamos aplicar o estilo necessário para que o texto fique escondido e apareça apenas no momento do hover. O segredo aqui, no entanto, reside na propriedade opacity e no uso de position: absolute. Portanto, acompanhe atentamente as regras abaixo:

CSS

.card-projeto {
    position: relative;
    width: 400px; /* Ajuste conforme necessário */
    height: 250px;
    overflow: hidden;
    border-radius: 8px;
}

.card-projeto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 157, 113, 0.8); 
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0; 
    transition: opacity 0.4s ease;
}

.card-projeto:hover .overlay {
    opacity: 1;
}

.card-projeto:hover img {
    transform: scale(1.1); 
}

.texto {
    color: white;
    text-align: center;
    padding: 20px;
}

Entendendo o Funcionamento Técnico

Para que você domine essa técnica, é fundamental entender por que utilizamos essas propriedades específicas. De fato, o uso de position: relative no container principal é o que permite que a .overlay com position: absolute fique presa dentro dos limites da imagem.

Além disso, a propriedade transition é o que garante a suavidade do movimento. Caso contrário, o texto apareceria de forma brusca, o que prejudicaria a experiência do usuário. Note que também adicionamos um leve scale na imagem. Dessa forma, criamos uma sensação de profundidade que torna o design muito mais dinâmico.

Personalização e Dicas Extras

Certamente, você pode adaptar as cores e fontes para combinar com a identidade visual do seu projeto. Sendo assim, aqui estão algumas sugestões para elevar o nível do seu efeito:

Cores de Overlay: Experimente utilizar gradientes em vez de cores sólidas. Por exemplo, um degradê do preto para o transparente pode dar um ar mais cinematográfico.
Animação do Texto: Você pode fazer o texto “subir” enquanto aparece. Para isso, basta adicionar um transform: translateY(20px) inicial no texto e mudá-lo para 0 no hover.
Acessibilidade: Nunca esqueça de preencher o atributo alt das imagens. Afinal, isso é essencial para que leitores de tela entendam o conteúdo e para que o Google indexe melhor o seu post.

Por que utilizar este efeito?

Atualmente, o foco do desenvolvimento frontend é criar interfaces que respondam às ações do usuário de maneira elegante. Diferente de blocos de texto estáticos abaixo das fotos, o efeito hover com texto sobre imagem limpa o visual do site e foca na parte visual primeiro.

Além do mais, essa técnica ajuda no SEO, visto que você mantém o texto em formato HTML real dentro do código. Dessa maneira, os motores de busca conseguem ler as informações importantes, enquanto o usuário desfruta de uma interface limpa e moderna.

Conclusão

Em resumo, criar interações atraentes é o que diferencia um site comum de um projeto profissional de alta conversão. Como vimos, com poucas linhas de CSS, conseguimos um resultado impactante. Portanto, escolha uma bela imagem e comece a testar esse efeito no seu blog agora mesmo!