Simples fade IN / fadé out ao hover usando css3

Nos velhos tempos (era jQuery), usávamos .animate() ou .fadeIn() para efeitos de hover. Em 2026, usar JavaScript para isso é um crime contra o desempenho.

A transition CSS3 é acelerada por hardware (gerida pela GPU), mais suave e requer zero scripts.

#Por qué as transições CSS vencem o javascript

Benefícios de Desempenho:

• Aceleração GPU: As transições CSS correm na placa gráfica, não na CPU
• Sem Execução de JavaScript: Zero sobrecarga de script, resposta instantânea
• Otimização do Navegador: Os navegadores otimizam animações CSS nativamente
• Amigo da Bateria: Menos uso de CPU significa maior vida útil da bateria no telemóvel

#Efeito fade básico

Digamos que tem uma imagem que deve escurecer quando passa o rato sobre ela.

/* O Elemento */
.hover-image {
    opacity: 1;
    /* A Parte Mágica */
    transition: opacity 0.3s ease-in-out;
}

/* O Gatilho */
.hover-image:hover {
    opacity: 0.7;
}

O qué acontece:

1. A imagem começa com opacity: 1 (totalmente visível)
2. Ao passar o rato, transita para opacity: 0.7 (30% transparente)
3. Leva 0.3 segundos com suavização suave
4. Retorna a opacity: 1 quando o hover termina

#Compreender as propriedades de transição

#Transition-property

Específica qual propriedade CSS animar. Especifique sempre propriedades específicas em vez de all para melhor desempenho.

/* Bom: Propriedade específica */
transition: opacity 0.3s ease-in-out;

/* Melhor: Múltiplas propriedades específicas */

/* Evitar: Anima TODAS as propriedades (impacto no desempenho) */

#Transition-duration

Quanto tempo a animação demora. Valores comuns:

/* Muito rápido (subtil) */

/* Padrão (ponto ideal para UI) */

#Transition-timing-function

Controla a curva dé aceleração. É isto que faz as animações parecerem “naturais”.

/* Linear: Velocidade constante (robótico) */

/* Ease: Início lento, meio rápido, fim lento (padrão) */

/* Ease-in-out: Início e fim lentos, meio rápido (muito suave) */

#Sintaxé abreviada completa

Exemplos:

/* Propriedade única */

/* Com atraso */

#Efeitos hover avançados

#1. Fade + escala (efeito zoom)

Combiné opacidade e transformação para um efeito de zoom moderno:

.card-img {
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.3s ease-in-out, transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.card-img:hover {
    opacity: 0.9;
    transform: scale(1.05);
}

#2. Fade + texto sobreposto

Perfeito para galerias de imagens:

.image-container img {
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}

.image-container:hover img {
    opacity: 0.7;
}

#Resumo

As transições CSS são a forma moderna e performante de criar efeitos de hover.

Pontos Chave:

• Use propriedades específicas, não all
• 0.2-0.3s é o ponto ideal para interações UI
• ease-out parecé o mais natural
• Use transform em vez de propriedades de posição/tamanho
• Teste em dispositivos reais

Exploré os nossos desenvolvimento profissional WordPress para levar o seu projeto mais longe.