Como esmaecer imagens ao passar o mouse no WordPress (simples e fácil)

Embora possa parecer algo pequeno, uma das coisas que às vezes adicionamos aos nossos sites do WordPress é uma simples animação de fade-in ou fade-out quando um usuário move o mouse sobre uma imagem. É uma maneira sutil, porém eficaz, de tornar nossos sites mais envolventes e interativos.

Descobrimos que essas pequenas dicas visuais podem fazer uma grande diferença na forma como os visitantes interagem com nosso conteúdo. Não se trata apenas de deixar o site mais bonito – essas animações podem realmente incentivar os visitantes a explorar mais o nosso conteúdo.

Neste artigo, mostraremos como adicionar esse efeito de imagem esmaecida ao passar o mouse no WordPress.

Por que esmaecer imagens ao passar o mouse no WordPress?

As animações são uma maneira fácil de tornar seu site mais interessante e podem até mesmo chamar a atenção do visitante para o conteúdo mais importante da página, como o logotipo do site ou uma chamada para ação.

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

Isso incentiva as pessoas a interagirem com suas imagens e pode até mesmo adicionar um elemento de narrativa à página. Por exemplo, imagens diferentes podem aparecer e desaparecer à medida que o visitante se move pela página.

Ao contrário de outras animações, o efeito de esmaecimento 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 fade às suas imagens ao passar o mouse no WordPress. Basta usar os links rápidos abaixo para ir direto ao método que você deseja usar:

Método 1: Adicionar Image Fade on Mouseover a todas as imagens do WordPress

A maneira mais fácil de adicionar um efeito de desvanecimento a todas as suas imagens é usar o WPCode. Esse plug-in gratuito permite que você adicione facilmente códigos personalizados no WordPress sem precisar editar os arquivos do tema.

Com o WPCode, até mesmo os iniciantes podem editar o código de seus sites sem correr o risco de cometer erros e erros de digitação que podem causar muitos erros comuns do WordPress.

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

Após a ativação, vá para Code Snippets ” Add Snippet.

Aqui, você verá todos os snippets prontos do WPCode que podem ser adicionados ao seu site. Isso inclui um snippet que permite desativar completamente os comentários, fazer upload de tipos de arquivos que o WordPress normalmente não suporta, desativar páginas de anexos e muito mais.

Basta passar o mouse sobre “Add Your Custom Code” e clicar em “+ Add Custom Snippet” quando ele aparecer.

Para começar, digite um título para o snippet de código personalizado. Pode ser qualquer coisa que ajude você a identificar o snippet no painel do WordPress.

Para adicionar CSS personalizado ao WordPress, abra o menu suspenso “Tipo de código” e selecione “CSS Snippet”.

No editor de código, adicione o seguinte trecho 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;
}

Esse 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 com que a imagem desapareça mais lentamente, basta substituir “2s ease” por um número maior. Se você quiser que a imagem desapareça mais rapidamente, use ‘1s ease’ ou um número menor.

Você também pode aumentar ou diminuir a “opacidade” alterando a linha opacity:0.6.

Se você alterar qualquer um desses números, certifique-se de alterá-los em todas as propriedades (webkit, moz, ms e o) para que o efeito de esmaecimento tenha a mesma aparência em todos os navegadores.

Quando estiver satisfeito com o snippet, vá até a seção “Inserção”. O WPCode pode adicionar seu código em diferentes locais, como depois de cada publicação, somente no frontend ou somente no administrador.

Para adicionar um efeito de esmaecimento a todas as suas imagens, clique em “Auto Insert” (Inserção automática) se ainda não estiver selecionado. Em seguida, abra o menu suspenso “Location” e escolha “Site Wide Header”.

Depois disso, você está pronto para rolar até a parte superior da tela e clicar no botão de alternância “Inactive” (Inativo) para que ele mude para “Active” (Ativo).

Por fim, clique em “Save Snippet” (Salvar snippet) para ativar o snippet de CSS.

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

Método 2: Adicionar animações de esmaecimento de imagem a páginas individuais

O uso de um efeito de esmaecimento para cada imagem pode causar distração, especialmente se você tiver uma galeria de fotos em seu site, uma loja de banco de imagens ou qualquer outro site que tenha muitas imagens.

Com isso em mente, talvez você queira usar efeitos de esmaecimento somente em uma página ou publicação específica.

A boa notícia é que o WPCode permite que você crie códigos de acesso personalizados. Você pode colocar esse shortcode em qualquer página, e o WordPress mostrará os efeitos de desvanecimento somente nessa página.

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

Depois disso, role até a seção “Insertion” (Inserção), mas, dessa vez, selecione “Shortcode” (Código curto).

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

Depois disso, vá em frente e torne o snippet ativo seguindo o mesmo processo descrito acima.

Agora você pode ir a qualquer página, post ou área pronta para widget e criar um novo bloco “Shortcode”. Em seguida, basta colar o shortcode do WPCode nesse bloco.

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

Feito isso, clique no botão “Update” (Atualizar) ou “Publish” (Publicar) para ativar o shortcode. Em seguida, você pode visitar essa página, página ou área pronta para widget para ver o efeito de fade-on ao passar o mouse.

Método 3: Adicionar animações de esmaecimento de imagem às imagens em destaque

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

Ao esmaecer as imagens em destaque ao passar o mouse, você pode tornar seu site mais atraente e envolvente sem animar cada imagem em seu blog ou site do WordPress.

Para adicionar uma animação de esmaecimento às miniaturas de suas postagens, basta criar um novo snippet 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 “Insertion” (Inserção) e selecione “Auto Insert” (Inserção automática).

Em seguida, abra o menu suspenso “Location” e escolha “Site Wide Header”.

Depois disso, você pode seguir em frente e ativar o trecho de código usando o mesmo processo descrito acima.

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

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

Efeitos bônus para adicionar às suas imagens do WordPress

Os efeitos de esmaecimento são uma forma divertida de tornar as imagens mais interessantes, mas há muitas outras maneiras de usar animações no WordPress. Por exemplo, você pode usar animações de flipbox para revelar texto quando um visitante passa o mouse sobre uma imagem ou efeitos de zoom para que os usuários possam explorar uma imagem com mais detalhes.

Aqui estão outros efeitos interessantes que você pode adicionar às suas imagens:

• Como adicionar filtros de fotos semelhantes aos do Instagram no WordPress (passo a passo)
• Como mostrar fotos de antes e depois no WordPress (com efeito de slide)
• Como adicionar o recurso de não clicar com o botão direito do mouse nas imagens do WordPress
• Como criar imagens interativas no WordPress
• Como adicionar facilmente imagens interativas em 360 graus no WordPress

Esperamos que este artigo tenha ajudado você a aprender como esmaecer imagens ao passar o mouse no WordPress. Você também pode consultar nosso guia sobre como organizar arquivos do WordPress em pastas da biblioteca de mídia e nossas escolhas de especialistas dos melhores plug-ins e ferramentas de imagens em destaque para WordPress.

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