Como Desvanecer Imagens ao Passar o Mouse no WordPress (Simples e Fácil)

Você já quis adicionar um pouco de brilho às imagens do seu site? Estamos falando de um toque pequeno e profissional que faz seu site parecer mais interativo sem ser distrativo.

Na WPBeginner, descobrimos que um simples efeito de fade ao passar o mouse é uma solução perfeita. É uma animação sutil que incentiva gentilmente os visitantes a interagir com seu conteúdo visual.

Essa pequena alteração pode fazer uma grande diferença na aparência geral do seu site, e é surpreendentemente fácil de configurar. Você não precisa ser um especialista em codificação para fazer isso.

Neste guia, mostraremos exatamente como adicionar o efeito de fade em imagens ao passar o mouse no WordPress.

Por que usar Fade em Imagens ao Passar o Mouse no WordPress?

Animações são uma maneira fácil de tornar seu site mais interessante e podem até atrair a atenção do visitante para o conteúdo mais importante da sua página, como o logo do seu site ou um chamada para ação.

Existem muitas maneiras diferentes de usar animações CSS no WordPress, mas adicionar um efeito de hover em imagens é particularmente eficaz. A animação de fade significa que suas imagens aparecerão ou desaparecerão lentamente quando os visitantes passarem o mouse sobre elas.

Isso incentiva as pessoas a interagir com suas imagens e pode até adicionar um elemento de narrativa à página. Por exemplo, imagens diferentes podem aparecer e desaparecer gradualmente conforme o visitante navega pela página.

Ao contrário de algumas outras animações, o efeito de desvanecimento da imagem ao passar o mouse é sutil, portanto, não afetará negativamente a experiência de leitura do visitante ou qualquer otimização de imagem que você tenha feito.

Dito isso, vamos mostrar como adicionar um desvanecimento às suas imagens ao passar o mouse no WordPress. Simplesmente use os links rápidos abaixo para pular diretamente para o método que você deseja usar:

• Método 1: Adicionando Desvanecimento de Imagem ao Passar o Mouse em Todas as Imagens do WordPress
• Método 2: Adicionando Animações de Desvanecimento de Imagem a Páginas Individuais
• Método 3: Adicionando Animações de Desvanecimento de Imagem a Imagens em Destaque
• Perguntas Frequentes (FAQs)
• Recursos Adicionais para Efeitos e Gerenciamento de Imagens

Método 1: Adicionando Desvanecimento de Imagem ao Passar o Mouse em Todas as Imagens do WordPress

A maneira mais fácil de adicionar um efeito de desvanecimento a todas as suas imagens é usando o plugin gratuito WPCode. É o plugin de snippets de código mais poderoso e fácil de usar para WordPress, e permite adicionar código personalizado sem precisar editar os arquivos do seu tema.

Isso é muito mais seguro porque o plugin ajuda a prevenir erros que podem causar erros comuns do WordPress. Para mais detalhes sobre todos os seus recursos, você pode ler nossa análise completa do WPCode.

Dica de Especialista: Na WPBeginner, usamos o WPCode para gerenciar todos os trechos de código personalizados em nosso portfólio de sites. É uma maneira confiável para adicionarmos funcionalidade e fazermos ajustes com segurança, sem nunca editar diretamente o arquivo functions.php de um tema.

A primeira coisa que você precisa fazer é instalar e ativar o plugin gratuito WPCode. Para mais detalhes, veja nosso guia passo a passo sobre como instalar um plugin do WordPress.

Ao ativar, acesse Snippets de Código » Adicionar Snippet.

Aqui, você verá todos os trechos de código WPCode prontos que você pode adicionar ao seu site. Estes incluem um trecho que permite que você desative completamente os comentários, carregue tipos de arquivo que o WordPress normalmente não suporta, desative páginas de anexo, e muito mais.

Simplesmente passe o mouse sobre ‘Adicionar seu código personalizado’ e clique em ‘+ Adicionar trecho personalizado’ quando ele aparecer.

Para adicionar CSS personalizado ao WordPress, você precisa selecionar ‘Trecho CSS’ como o tipo de código na lista de opções que aparecem na tela.

Em seguida, na próxima página, digite um título para o trecho de código personalizado.

Isso pode ser qualquer coisa que ajude você a identificar o trecho no painel do WordPress.

No editor de código, adicione o seguinte snippet de código:

img:hover {
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}

Este trecho de código fará com que cada imagem desapareça por 2 segundos quando o usuário passar o mouse sobre ela. Para fazer a imagem desaparecer mais lentamente, simplesmente substitua ‘2s ease’ por um número maior. Se você quiser fazer a imagem desaparecer mais rapidamente, use ‘1s ease’ ou menor.

Você também pode tornar a ‘opacidade’ maior ou menor alterando a linha opacity:0.6.

Se você alterar algum desses números, certifique-se de alterá-los em todas as propriedades (webkit, moz, ms e o) para que o efeito de desaparecimento fique igual em todos os navegadores.

Quando você estiver satisfeito com o trecho, role até a seção ‘Inserção’. O WPCode pode adicionar seu código a diferentes locais, como após cada postagem, somente no frontend ou somente no admin.

Para adicionar um efeito de fade a todas as suas imagens, clique em ‘Inserir Automaticamente’ se ainda não estiver selecionado. Em seguida, abra o menu suspenso ‘Localização’ e escolha ‘Cabeçalho do Site Inteiro’.

Depois disso, você está pronto para rolar até o topo da tela e clicar no alternador ‘Inativo’ para que ele mude para ‘Ativo’.

Finalmente, clique em 'Salvar Snippet' para tornar o snippet CSS ativo.

Agora, se você passar o mouse sobre qualquer imagem em seu site WordPress, verá o efeito de fade em ação.

Método 2: Adicionando Animações de Desvanecimento de Imagem a Páginas Individuais

Usar um efeito de fade para cada imagem pode se tornar distrativo, especialmente se você tiver uma galeria de fotos em seu site, uma loja de fotos de estoque, ou qualquer outro site que tenha muitas imagens.

Com isso em mente, você pode querer usar efeitos de fade apenas em uma página ou post específico.

A boa notícia é que o WPCode permite criar shortcodes personalizados. Você pode colocar este shortcode em qualquer página, e o WordPress exibirá efeitos de fade apenas nessa página.

Para fazer isso, basta criar um snippet de código personalizado e adicionar o código de animação de fade seguindo o mesmo processo descrito acima. Em seguida, clique no botão ‘Salvar snippet’.

Depois disso, role até a seção ‘Inserção’, mas desta vez selecione ‘Shortcode’.

Isso cria um shortcode que você pode adicionar a qualquer página, post ou área pronta para widgets.

Depois disso, prossiga e ative o snippet seguindo o mesmo processo descrito acima.

Agora você pode ir a qualquer página, post ou área pronta para widgets e criar um novo bloco ‘Shortcode’. Em seguida, simplesmente cole o shortcode do WPCode nesse bloco.

Para mais informações sobre como inserir o shortcode, consulte nosso guia sobre como adicionar um shortcode no WordPress.

Com isso feito, clique no botão ‘Atualizar’ ou ‘Publicar’ para ativar o shortcode. Você pode então visitar essa página, post ou área pronta para widgets para ver o efeito de fade ao passar o mouse.

Método 3: Adicionando Animações de Fade de Imagem a Imagens em Destaque

Outra opção é adicionar animações de fade às suas imagens em destaque ou miniaturas de postagem. Estas são as imagens principais da postagem.

Ao adicionar fade às imagens em destaque ao passar o mouse, você pode tornar seu site mais atraente e envolvente sem animar todas as imagens do seu blog WordPress ou site.

Para adicionar uma animação de fade às miniaturas de suas postagens, basta criar um novo trecho de código personalizado seguindo o mesmo processo descrito acima.

No entanto, desta vez, adicione o seguinte código ao editor:

img.wp-post-image:hover {
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}

Depois disso, role até a caixa de ‘Inserção’ e selecione ‘Inserir Automaticamente’.

Em seguida, abra o menu suspenso ‘Localização’ e escolha ‘Cabeçalho do Site Inteiro’.

Depois disso, você pode prosseguir e tornar o trecho de código ativo usando o mesmo processo descrito acima.

Agora, você pode passar o mouse sobre qualquer imagem em destaque para ver a animação de fade em ação.

Se você quiser adicionar ainda mais efeitos de mouseover de imagem, consulte nosso guia sobre como adicionar efeitos de hover de imagem no WordPress.

Perguntas Frequentes (FAQs)

Aqui estão as respostas para algumas das perguntas mais comuns que recebemos sobre como adicionar efeitos de hover de imagem no WordPress.

Adicionar um efeito de fade vai deixar meu site mais lento?

Não, este efeito de fade baseado em CSS não deve deixar seu site visivelmente mais lento. O código usa transições CSS simples, que são muito leves e otimizadas por navegadores web modernos.

Este método é muito mais eficiente do que usar JavaScript ou grandes bibliotecas de animação para um efeito tão simples.

Como aplico o efeito de fade a uma única imagem específica?

Para direcionar uma única imagem, você pode atribuir a ela uma classe CSS personalizada. Primeiro, selecione o bloco de imagem no editor e encontre o painel ‘Avançado’ nas configurações do bloco à direita.

No campo ‘Classes CSS adicionais’, adicione um nome exclusivo como custom-fade-image. Em seguida, modifique seu snippet WPCode para direcionar essa classe especificamente, assim:
img.custom-fade-image:hover { ... }.

O efeito de fade da imagem ao passar o mouse funciona em dispositivos móveis?

A ação de ‘mouseover’ ou ‘hover’ é específica para usuários de desktop com um cursor de mouse. Este efeito não será acionado em dispositivos de toque como smartphones ou tablets porque não há cursor para pairar sobre as imagens.

No entanto, o código não causará nenhum problema em dispositivos móveis. Suas imagens simplesmente serão exibidas normalmente, sem a animação de fade.

Posso usar outros efeitos de animação além do fade?

Sim, absolutamente. O fade é apenas uma das muitas possibilidades que você pode alcançar com CSS.

Você pode criar efeitos como zoom, slide, escala de cinza ou aplicar sobreposições. Para mais ideias e exemplos de código, veja nosso guia detalhado sobre como adicionar efeitos de hover em imagens no WordPress.

Recursos Adicionais para Efeitos e Gerenciamento de Imagens

Um fade simples é um ótimo começo, mas existem muitas outras maneiras de tornar suas imagens mais envolventes. Se você quiser explorar opções mais avançadas, aqui estão alguns de nossos outros guias sobre efeitos e gerenciamento de imagens:

• Como Adicionar Filtros de Foto Estilo Instagram no WordPress (Passo a Passo)
• Como Mostrar Fotos de Antes e Depois no WordPress (com Efeito de Deslizamento)
• Como adicionar a opção de não clicar com o botão direito em imagens do WordPress
• Como Criar Imagens Interativas no WordPress
• Como Adicionar Facilmente Imagens Interativas de 360 Graus no WordPress

Esperamos que este artigo tenha ajudado você a aprender como fazer fade em imagens ao passar o mouse no WordPress. Você também pode querer ver nosso guia sobre como organizar arquivos do WordPress em pastas da biblioteca de mídia e nossas escolhas de especialistas dos melhores plugins e ferramentas de imagens destacadas para WordPress.

Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.