Como adicionar efeitos de passar o mouse sobre imagens no WordPress (5 maneiras fáceis)

Adicionar um efeito de passar o mouse sobre o seu site pode parecer um pequeno detalhe, mas pode melhorar a aparência e a usabilidade do site. Quando os visitantes passam o mouse sobre uma imagem ou botão e veem uma leve mudança, isso indica que o elemento é interativo. 

Esse movimento sutil aumentará o engajamento e ajudará a reduzir as taxas de rejeição. Os efeitos de passar o mouse são especialmente úteis no comércio eletrônico. Eles permitem que os compradores visualizem os produtos mais de perto, incentivando-os a explorar mais e prosseguir para a finalização da compra.

Existem muitas maneiras de adicionar efeitos de passar o mouse sobre imagens no WordPress, desde transições suaves até animações de virada chamativas. Abaixo, você encontrará vários métodos para começar!

Como adicionar efeitos de sobreposição de imagens no WordPress

Neste artigo, reunimos cinco maneiras fáceis de adicionar efeitos de passar o mouse ao seu site. Escolha a que melhor se adapta às suas necessidades!

Método 1: Utilizando um Plugin

Um plugin economizará muito tempo e esforço, especialmente se você quiser usar vários efeitos de passar o mouse no mesmo site.

Por exemplo, se você tiver várias galerias de imagens, poderá aplicar animações diferentes a cada uma, como um zoom simples para miniaturas de posts do blog ou um efeito de inversão para imagens de produtos.

Utilizar um plugin como o Image Hover Effects Ultimate facilita bastante esse processo. Este plugin é gratuito para todos e oferece uma ampla variedade de efeitos para cada elemento. Para começar, basta instalá-lo seguindo o tutorial abaixo: 

Instalando um Plugin

• Abra a área administrativa do WordPress.
• Clique em Adicionar Plugin no Plugins na barra lateral.

• Digite "Image Hover Effects Ultimate" na barra de pesquisa.

• Selecione o primeiro resultado e clique em Instalar agora para iniciar o download.
• Após a conclusão da instalação, clique no Ativar para começar a usar o plugin.

Usando o plugin Image Hover Effects para WordPress

• Após a instalação do plugin, você verá um novo "Imagem ao passar o mouse" no seu painel.

• Clique no menu para abrir as configurações do plugin. 

• Escolha os efeitos que desejar usar. Para este tutorial, vamos experimentar com a Lupa de Imagem .
• Após selecionar o efeito, você verá uma variedade de estilos de animação.

Quando encontrar um que lhe agrade, clique em Criar estilo .

• Uma janela pop-up será exibida. Digite um título no Nome e selecione um efeito no layout (1º, 2º ou 3º). Em seguida, clique em Salvar para continuar.
• Você será redirecionado para uma nova página onde poderá personalizar as configurações, como altura, largura e opacidade. Experimente para ver o que fica melhor.

• Quando estiver satisfeito com as configurações, clique em Editar para personalizar sua imagem.

• Outra janela pop-up aparecerá. Nela, você poderá personalizar a posição da ampliação. 

• Você também pode substituir a imagem clicando no Escolher Imagem .
• Após configurar tudo, clique em Enviar para salvar o efeito de foco.

• Para aplicar o efeito ao seu site, copie e cole o código curto na sua publicação ou página. 

• Agora, seu efeito de sobreposição de imagem simples está pronto para ser usado em qualquer parte do seu site. 

Método 2: Usando CSS

Para usar esse método, você não precisa instalar nenhum plugin. Com CSS personalizado, você pode adicionar diversos efeitos de foco ao seu tema.

Vamos começar com algo simples, como um efeito de sublinhado ao passar o mouse. Se você quiser adicionar esse efeito ao seu tema, siga os passos simples abaixo:

• Navegue até a publicação onde deseja adicionar um efeito de foco.
• Adicione uma imagem clicando no bloco Capa + .

• Insira seu conteúdo no Capa . Aqui, adicionaremos um título e um botão.

• Defina a fonte e os estilos ao seu gosto.
• Salve a página como rascunho.
• Em seguida, acesse o Aparência no seu painel de controle.

• Em seguida, clique em Personalizar e acesse CSS Adicional . Adicione o seguinte código:

body { display: flex; justify-content: center; align-items: center; height: 100vh; background: #0f0f0f; margin: 0; font-family: Arial, sans-serif; } .hover-underline { font-size: 2rem; color: #ffffff; position: relative; display: inline-block; } .hover-underline::after, .hover-underline::before { content: ''; position: absolute; width: 100%; height: 2px; background: linear-gradient(to right, #ff0000, #00ffff); bottom: -5px; left: 0; transform: scaleX(0); transform-origin: right; transition: transform 0.4s ease-out; } .hover-underline::before { top: -5px; transform-origin: left; } .hover-underline:hover::after, .hover-underline:hover::before { transform: scaleX(1); }
 

• Clique em Publicar para salvar o código.

• Agora volte à sua publicação e selecione o texto ao qual deseja aplicar o efeito de sublinhado.
• Abra a Avançado na barra lateral do bloco e digite underline-hover no campo Classe(s) CSS adicionais

• Salve a página e visualize-a para ver o efeito. 

Existem inúmeros efeitos de passar o mouse para escolher, então selecione o que melhor se adapta ao seu estilo. Você pode aprender a escrever o CSS por conta própria ou encontrar exemplos na comunidade WordPress. Tem de tudo por aí!

Método 3: Utilizando construtores de páginas (ex.: Elementor)

Um construtor de páginas como o Elementor permite que você crie seu site com muita criatividade. Ele possui efeitos de passar o mouse integrados, prontos para usar e que dão vida ao seu site sem a necessidade de qualquer conhecimento de programação.

Você também pode usá-lo para criar efeitos de sobreposição de imagens no WordPress. Nesta seção, vamos experimentar os efeitos de sobreposição integrados ao próprio construtor de páginas.

Para configurar os efeitos:

• Abra o editor Elementor
• Adicione sua imagem.

• Selecione a imagem e, em seguida, acesse a Estilo .
• Deslize para baixo e clique em "Passar o mouse" .

• No "Animação ao passar o mouse" , você encontrará uma variedade de efeitos prontos para uso.

• Aqui, escolhemos o Crescer como exemplo. Você pode personalizar a duração da transição, a opacidade e outras configurações para combinar com o design do seu site.

• Após concluir o processo, você poderá ver o efeito imediatamente, sem precisar visualizá-lo previamente. 

Método 4: Usando plugins do Flipbox

Se você procura uma solução mais rápida, pode instalar o plugin Flipbox. O efeito Flipbox ocorre quando uma imagem gira para revelar o conteúdo da frente ou do verso ao passar o cursor sobre ela.

Esse efeito é ótimo para imagens fotográficas, onde você pode exibir a foto na frente e os detalhes da câmera no verso. Mas as possibilidades são infinitas.

• No painel do WordPress, clique no Plugins . Em seguida, selecione Adicionar Plugin .
• Digite "Flipbox - Awesome Flip Boxes Image Overlay" na barra de pesquisa.

• Clique em Instalar agora e, em seguida, ative o plugin.

• Para criar uma caixa flip, acesse o menu Caixa Flip Criar Nova .
• Escolha as animações que você preferir. Depois de encontrar uma, clique em Criar Estilo .

• Uma janela pop-up será exibida. Selecione o layout desejado (1º, 2º ou 3º) e insira um título. 

• Clique em Salvar para continuar.
• Em seguida, você será direcionado para o menu de personalização, onde poderá definir os efeitos e adicionar seu conteúdo.

• Deslize a tela para baixo até encontrar a aba "Visualizar" "Editar" para personalizar o conteúdo da frente e do verso da caixa flip.

• Quando terminar, clique em Enviar para salvar.

• Para adicionar este flipbox à sua página, basta copiar e colar o código curto gerado em qualquer seção do seu site. 

• E pronto, aqui está o produto final! 

Método 5: Usando Blocos do Gutenberg

O Gutenberg é o editor de blocos padrão do WordPress que permite adicionar efeitos de foco diretamente no editor.

Embora possa não oferecer efeitos de foco avançados, você pode aprimorar as animações usando CSS personalizado.

Como exemplo, vamos criar um efeito de desvanecimento simples ao passar o cursor sobre o elemento. Aqui está o tutorial passo a passo:

• Navegue até a publicação ou página onde deseja adicionar o efeito de passar o cursor.
• Clique no sinal de + para adicionar um novo bloco e, em seguida, escolha o bloco Capa

• Dentro do de Capa , adicione um bloco de Parágrafo

• Insira o título e uma breve descrição.
• Personalize o tamanho, a opacidade, o alinhamento e a cor da fonte conforme necessário.

• Em seguida, selecione o "Capa" para adicionar uma classe CSS personalizada.
• Abra a Avançado na barra lateral direita.
• Insira fade-hover-effect no campo Classe CSS adicional .

• Em seguida, salve a página como rascunho.

• Acesse o Plugins e selecione o plugin de snippets de código desejado. Neste exemplo, estamos usando o WPCode .
• Crie um novo trecho de CSS e cole o seguinte código:

.fade-hover-effect { opacity: 0; transform: translateY(10px); transition: opacity 0.4s ease, transform 0.4s ease; } .fade-hover-effect:hover { opacity: 1; transform: translateY(0); } 

• Salve o trecho de código e ative-o.
• Agora, visualize a página para ver o efeito de transição gradual ao passar o mouse em ação.

Você pode reutilizar esse efeito adicionando a classe `fade-hover-effect` a qualquer bloco ou imagem. Mas, se você estiver trabalhando com muitas imagens, considere usar um plugin como WP Media Folder para organizar sua biblioteca de mídia em pastas. Isso facilita a localização e a reutilização de conteúdo relacionado.

O uso excessivo de efeitos afeta o desempenho?

Sim, usar muitos efeitos de passar o mouse no seu site pode afetar o desempenho, principalmente se não estiver otimizado corretamente. Isso porque alguns efeitos de passar o mouse exigem CSS adicional. O tamanho do CSS do seu site pode aumentar e tornar o carregamento da página mais lento.

O ideal é usar apenas os efeitos de passar o mouse essenciais para aprimorar a experiência do usuário sem sobrecarregar o site.

Resumo

Aprender como adicionar efeitos de foco em imagens no WordPress pode ajudar a impulsionar seu site, melhorando a interação do usuário e mantendo-o engajado.

Com diversas maneiras de adicionar efeitos de foco, seja por meio de plugins, CSS personalizado ou construtores de páginas, você tem a liberdade de escolher o que funciona melhor para você. Experimente diferentes estilos para encontrar o que melhor se adapta ao seu site!