Como Adicionar Efeitos de Hover de Imagem no WordPress (Passo a Passo)

Sabemos o quanto de esforço é dedicado à escolha das imagens perfeitas para o seu site. Mas, às vezes, até as melhores fotos podem parecer um pouco estáticas, falhando em capturar a atenção total de um visitante.

Adicionar uma animação simples de hover pode ser o pequeno detalhe que faz seu site parecer mais profissional e envolvente. Muitos acreditam que isso requer código personalizado, mas encontramos várias maneiras fáceis de fazer isso em nossos próprios projetos sem nenhum código.

Neste artigo, vamos guiá-lo através de cinco métodos simples, passo a passo, para adicionar belos efeitos de hover em imagens no WordPress. Cobriremos tudo, desde fades simples até flipboxes interativos.

Por Que Usar Efeitos de Hover em Imagens no WordPress?

Efeitos de hover em imagens permitem que você adicione animações curtas às suas imagens, como zooms, fades, popups e muito mais. Isso tornará suas imagens mais interessantes e envolventes, mesmo que uma página tenha muitas imagens.

Você também pode usar efeitos de hover para chamar a atenção do visitante para o conteúdo mais importante. Por exemplo, você pode usar animações CSS para destacar o logotipo do seu site ou um call to action.

Vamos mergulhar em 5 maneiras amigáveis para iniciantes de adicionar diferentes efeitos de hover em imagens ao seu site WordPress. Simplesmente use os links rápidos abaixo para pular direto para o efeito que você deseja usar:

• Opção 1: Adicionar Efeitos Flipbox no WordPress (Rápido e Fácil)
• Opção 2: Adicionar Efeitos de Zoom e Ampliação de Imagem (Melhor para Lojas Online)
• Opção 3: Fazer Fade em Imagens ao Passar o Mouse no WordPress (Melhor para Desempenho)
• Opção 4: Adicionar Múltiplos Efeitos de Hover em Imagens ao WordPress (Mais Personalizável)
• Opção 5: Adicionar Efeitos de Popup de Hover em Imagens Usando um Editor CSS Visual
• Perguntas Frequentes Sobre Efeitos de Hover em Imagens
• Saiba Mais Maneiras de Usar e Gerenciar Imagens no WordPress

Opção 1: Adicionar Efeitos Flipbox no WordPress (Rápido e Fácil)

A maneira mais fácil de adicionar efeitos de hover ao WordPress é usar flipboxes. Uma flipbox é simplesmente uma caixa que vira quando você passa o mouse sobre ela. Isso permite que você mostre uma imagem, texto ou chamada para ação diferente ao passar o mouse.

Se você é um fotógrafo, então você pode mostrar uma foto de um lado da flipbox e informações sobre o modelo da câmera ou resolução do outro lado.

Se você está vendendo arte digital ou gráficos online, então você pode até adicionar um botão que os visitantes podem clicar para comprar essa foto.

A maneira mais fácil de criar flipboxes é usando Flipbox – Awesomes Flip Boxes Image Overlay. Este plugin gratuito vem com vários estilos diferentes de flipbox com uma mistura de imagens, textos e botões de chamada para ação.

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

Assim que o plugin for instalado e ativado, você pode criar sua primeira flipbox indo em Flip Box » Criar Novo.

Isso mostra todos os diferentes modelos que você pode usar.

Para escolher um design, clique no botão ‘Criar Estilo’ dele.

No pop-up que aparece, digite um nome para o design do flipbox. Isso é apenas para sua referência, então você pode usar o que quiser.

Você também pode escolher qual layout deseja usar clicando em 1º, 2º ou 3º.

Após escolher um estilo de flipbox, você pode alterar as fontes, o preenchimento e as margens.

Em seguida, você pode adicionar texto, imagens e ícones a ambos os lados do flipbox.

Quando estiver satisfeito com a aparência do flipbox, você pode querer adicionar mais caixas clicando no '+' na seção 'Adicionar Novos Flip Boxes'.

Isso permite que você crie vários flipboxes com o mesmo estilo e, em seguida, os organize em colunas e linhas.

Por exemplo, você pode criar uma flipbox para cada plano de preços.

Os compradores podem então passar o mouse sobre um plano para ver o custo.

Quando estiver satisfeito com as animações de hover, você pode adicioná-la a qualquer página, postagem ou área pronta para widgets usando um shortcode que o plugin fornece automaticamente.

Para instruções passo a passo, consulte nosso guia sobre como criar overlays e hovers de flipbox.

Opção 2: Adicionar Efeitos de Zoom e Ampliação de Imagem (Melhor para Lojas Online)

Efeitos de zoom permitem que os usuários vejam detalhes que normalmente não seriam visíveis. Se você tem uma loja de comércio eletrônico ou um marketplace online, isso permite que os compradores explorem um produto com mais detalhes, o que pode gerar mais vendas.

Efeitos de zoom também podem adicionar mais interação e engajamento ao seu site.

Por exemplo, você pode criar quebra-cabeças e jogos simples que desafiam os visitantes a identificar pequenos detalhes em suas imagens. Isso pode mantê-los em seu site por mais tempo, o que aumentará suas pageviews e diminuirá a taxa de rejeição.

O melhor plugin do WordPress para adicionar efeitos de zoom e ampliação de imagem é o WP Image Zoom.

Este plugin de efeitos de hover permite que você personalize como o efeito de zoom aparecerá e funcionará em todo o seu site WordPress. Você pode então habilitar o zoom para qualquer imagem.

Usaremos a versão gratuita neste guia, mas se você quiser mais opções de personalização, talvez queira conferir o WP Image Zoom Pro. Veja nossa análise do WP Image Zoom para mais detalhes.

Primeiro, você precisa instalar e ativar o plugin WP Image Zoom . Para mais detalhes, por favor, veja nosso guia passo a passo sobre como instalar um plugin WordPress.

Após a ativação, você precisa ir para a página WP Image Zoom » Configurações de Zoom na barra lateral de administração do WordPress. Se ainda não estiver selecionado, clique em ‘Configurações de Zoom’.

Para começar, você pode escolher entre algumas formas de lente diferentes.

Você também pode selecionar um tipo de cursor, definir um efeito de animação, habilitar o zoom ao passar o mouse ou ao clicar com o mouse, e definir um nível de zoom.

Quando você estiver satisfeito com a configuração do zoom, pode adicionar o efeito a qualquer imagem. No editor de blocos Gutenberg, clique para selecionar a imagem onde deseja adicionar um efeito de zoom. Ou, faça o upload de uma imagem primeiro para o WordPress.

No menu da direita, selecione o botão ‘com Zoom’.

Se você estiver usando o WooCommerce, você pode ativar o zoom em todas as imagens de seus produtos nas configurações do plugin. Isso é ideal se você deseja ativar o zoom em toda a sua loja online sem ter que atualizar cada produto individualmente.

Na aba ‘Configurações Gerais’, marque a caixa ‘Ativar o zoom…’, e os clientes poderão ampliar qualquer imagem de produto.

Para mais detalhes, consulte nosso guia sobre como adicionar zoom de ampliação para imagens no WordPress.

Opção 3: Fazer Fade em Imagens ao Passar o Mouse no WordPress (Melhor para Desempenho)

Outra opção é uma animação simples de fade, onde suas imagens aparecem ou desaparecem lentamente quando um visitante passa o mouse sobre elas. Esta é uma ótima maneira de destacar imagens enquanto o usuário navega pela página.

Você pode usar este efeito para guiar o visitante pelo seu conteúdo ou até mesmo adicionar um elemento de narrativa a uma postagem.

Ao contrário de algumas animações complexas, o efeito de fade é muito sutil. Ele não impactará negativamente a experiência de leitura nem interferirá nos seus esforços de otimização de imagens.

Isso o torna uma escolha perfeita para páginas que possuem muitas fotos de alta resolução.

A maneira mais fácil de adicionar este efeito é usando o plugin gratuito WPCode. Ele permite adicionar CSS personalizado sem ter que editar os arquivos do seu tema diretamente, o que é muito mais seguro.

Aqui no WPBeginner, usamos o WPCode para gerenciar todos os snippets personalizados que impulsionam nosso site. É uma ferramenta confiável que recomendamos para adicionar qualquer tipo de código personalizado. Para mais detalhes, você pode ler nossa análise completa do WPCode.

Para instruções completas sobre como usar o WPCode para este efeito, consulte nosso guia sobre como fazer fade em imagens ao passar o mouse no WordPress.

Opção 4: Adicionar Múltiplos Efeitos de Hover em Imagens ao WordPress (Mais Personalizável)

Você pode querer usar vários efeitos diferentes de hover de imagem em seu site. Por exemplo, se você tem muitas galerias de imagens, então você pode querer animar essas fotos de maneiras diferentes e interessantes.

A melhor maneira de adicionar múltiplos efeitos de hover no WordPress é usando Image Hover Effects Ultimate. Este plugin gratuito suporta uma ampla gama de efeitos que você pode personalizar para atender às suas necessidades.

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

Após a ativação, selecione ‘Image Hover’ no painel do WordPress. Agora você verá todos os diferentes tipos de efeitos de hover que pode usar.

Para este guia, selecionaremos ‘Caption Effects’, que adiciona texto animado sobre uma imagem.

Você pode criar qualquer tipo de efeito de hover que desejar, embora as opções que você vê possam variar.

Após clicar em ‘Caption Effects’, você verá todos os diferentes estilos que pode usar.

Simplesmente passe o mouse sobre um estilo para ver uma prévia de como a animação ficará.

Quando encontrar um estilo que goste, clique no botão ‘Create Style’ dele.

Isso abre um pop-up onde você pode escolher o layout exato que deseja usar. Simplesmente vá em frente e clique em 1º, 2º ou 3º.

Com isso feito, digite um título no campo ‘Name’. Isso é apenas para sua referência, então você pode usar qualquer coisa que ajude a identificar a imagem animada no seu painel do WordPress.

Depois disso, clique em ‘Save’.

Isso leva você a uma tela onde pode personalizar o efeito de hover. Isso inclui alterar a largura e altura do conteúdo, aumentar o espaçamento e adicionar uma sombra de caixa.

À medida que você faz alterações, a pré-visualização ao vivo será atualizada automaticamente, para que você possa experimentar diferentes configurações para ver o que fica melhor.

Para alguns efeitos de hover, você pode alterar a direção do efeito.

Por exemplo, na imagem a seguir, estamos alterando a direção do efeito de ‘persianas’ para que ele vá para a direita.

Você também pode tornar o efeito mais rápido ou mais lento arrastando o controle deslizante ‘Tempo do Efeito’. Se você usar um número maior, o efeito durará mais. Se você diminuir o número, o efeito será mais rápido e mais curto.

Se você tiver um número específico em mente, poderá digitá-lo na caixa ao lado do controle deslizante ‘Tempo do Efeito’.

Quando você estiver satisfeito com a configuração do efeito, é hora de adicionar algum conteúdo.

Para fazer isso, passe o mouse sobre a seção ‘Visualizar’ e clique no botão ‘Editar’ quando ele aparecer.

Isso abre um pop-up onde você pode digitar um título e uma breve descrição.

Este é o conteúdo que aparecerá quando um visitante passar o mouse sobre a imagem.

Depois disso, você pode substituir a imagem padrão pela sua própria foto.

Simplesmente passe o mouse sobre a foto de espaço reservado e clique em ‘Escolher Imagem’ quando ela aparecer.

Agora você pode escolher uma imagem da biblioteca de mídia do WordPress ou fazer upload de um novo arquivo do seu computador.

Às vezes, você pode usar efeitos de hover para enviar pessoas para outras áreas do seu blog WordPress ou site. Por exemplo, se você tem uma boutique online, você pode adicionar um link para o produto mostrado na imagem.

Você pode fazer isso adicionando um botão de CTA, que aparecerá abaixo da descrição curta.

Para começar, adicione o URL no campo 'Link'.

Em seguida, adicione sua mensagem digitando no campo 'Texto do Botão'.

Quando estiver satisfeito com as informações inseridas, clique em 'Enviar'.

Agora que você adicionou algum texto, é uma boa ideia clicar na aba 'Tipografia'.

Aqui, você pode alterar o tamanho da fonte, adicionar uma sombra de texto, aumentar ou diminuir as margens e muito mais.

Se você estiver usando um botão de CTA, certifique-se de clicar para expandir a seção 'Configurações do Botão'.

Aqui, você pode alterar a aparência do botão em seu estado padrão e 'hover', que é como ele aparece quando o visitante passa o mouse sobre ele. Você também pode alterar o alinhamento do botão.

A maioria dessas configurações é direta, então vale a pena examiná-las para ver que tipos diferentes de efeitos você pode criar.

Quando estiver satisfeito com a aparência da prévia, clique em 'Salvar' para armazenar suas alterações.

Você quer criar uma linha ou coluna de imagens animadas?

Por exemplo, você pode usar efeitos de hover de imagem para anunciar os melhores recursos do seu produto. Na imagem a seguir, o visitante pode passar o mouse sobre cada foto para ler sobre um recurso diferente.

Quer criar uma linha inteira ou uma galeria dessas imagens animadas? Sem problemas. Para adicionar outra, basta rolar para cima até a seção 'Adicionar Novo Hover de Imagem'.

Aqui, clique no botão '+'.

Isso abre um pop-up onde você pode criar um novo efeito de hover de imagem, seguindo o mesmo processo descrito acima.

Quando estiver satisfeito com a configuração do efeito, clique no botão 'Enviar' para armazenar suas alterações.

Para criar mais efeitos de hover, basta repetir o mesmo processo descrito acima.

Quando estiver satisfeito com a configuração dos efeitos, role até a caixa 'Shortcode'. Você pode adicionar este efeito de hover a qualquer página ou post copiando e colando este código.

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

Opção 5: Adicionar Efeitos de Popup de Hover em Imagens Usando um Editor CSS Visual

Muitos dos plugins acima permitem que você crie imagens animadas avançadas, como flipboxes, e depois as coloque em uma página usando shortcode. No entanto, às vezes, você pode querer adicionar um efeito de hover a uma imagem que já está na página.

Neste caso, você pode usar um plugin de CSS personalizado do WordPress. Isso permite que você faça alterações visuais em suas imagens sem codificação, e você também não precisa criar efeitos de hover separadamente no painel do WordPress.

Aqui, recomendamos o uso do CSS Hero. Este plugin permite editar quase todos os estilos CSS do seu site WordPress usando um editor visual. Ele também vem com efeitos de hover integrados que você pode aplicar a imagens com um clique de botão.

A primeira coisa que você precisa fazer é instalar e ativar o plugin CSS Hero. Para mais detalhes sobre como instalar um plugin, consulte nosso guia sobre como instalar um plugin do WordPress.

Assim que o plugin for instalado, você precisará clicar no botão ‘Prosseguir para Ativação do Produto’.

Isso o levará ao site do CSS Hero, onde você poderá fazer login em sua conta e obter uma chave de licença. Simplesmente siga as instruções na tela e você será redirecionado de volta ao seu site em alguns cliques.

Depois disso, abra a página ou postagem que contém a imagem que você deseja animar. Em seguida, clique em ‘CSS Hero’ na barra de administração do WordPress.

Isso abrirá essa página ou postagem no editor do CSS Hero.

Aqui, clicar em qualquer peça de conteúdo abrirá um painel com todas as configurações que você pode usar para personalizar esse conteúdo. Dito isso, basta clicar para selecionar qualquer imagem.

No menu da esquerda, selecione a aba ‘Snippets’.

Em seguida, clique em ‘Hover-Effects’. Agora você verá todos os diferentes efeitos CSS.

Para pré-visualizar um efeito, basta passar o mouse sobre o seu botão azul no menu da esquerda.

Quando encontrar um efeito que deseja usar, basta clicar em ‘Apply’.

Importante: Por padrão, o CSS Hero aplicará este efeito de hover a todas as imagens na página. Isso é ótimo para criar um estilo uniforme, mas se você quiser animar apenas uma imagem específica, um dos outros métodos de plugin neste guia pode ser mais adequado.

Para tornar esta alteração ativa, prossiga e clique no botão ‘Save & Publish’.

Perguntas Frequentes Sobre Efeitos de Hover em Imagens

Tendo ajudado milhares de usuários do WordPress, ouvimos praticamente todas as perguntas sobre como adicionar elementos interativos a um site. Aqui estão algumas das mais comuns que recebemos sobre efeitos de hover em imagens.

Efeitos de hover em imagens funcionam em dispositivos móveis?

Os efeitos de hover são projetados para cursores de mouse, portanto, não funcionam em dispositivos de toque como smartphones e tablets. No celular, a imagem geralmente exibirá seu estado padrão sem nenhuma animação.

Alguns plugins oferecem opções de fallback, como acionar uma animação no primeiro toque. Por causa disso, sempre recomendamos verificar suas páginas em um smartphone ou tablet para ver exatamente como suas imagens aparecerão para os visitantes móveis.

Isso garante uma ótima experiência para todos, independentemente do dispositivo que estiverem usando! 👍

Adicionar efeitos de hover em imagens deixará meu site mais lento?

A maioria dos efeitos de hover modernos são criados usando CSS, que é muito leve e eficiente. Ao usar um plugin de qualidade, esses efeitos não devem ter um impacto perceptível na velocidade ou desempenho do seu site.

Posso adicionar efeitos de hover em imagens sem um plugin?

Sim, é possível adicionar efeitos de hover em imagens escrevendo seu próprio código CSS personalizado. No entanto, este método requer conhecimento técnico e envolve a edição dos arquivos do seu tema, o que pode ser arriscado para iniciantes.

Usar um plugin é o método mais seguro e fácil para a maioria dos usuários, pois ele cuida de todo o código para você.

Saiba Mais Maneiras de Usar e Gerenciar Imagens no WordPress

Efeitos de hover em imagens não são a única maneira de adicionar mais interesse visual ao seu site. Aqui estão outros tutoriais que você pode ler sobre o uso de imagens no WordPress:

• Como Criar Imagens Interativas no WordPress
• Como Ampliar Imagens ao Clicar no WordPress (3 Métodos Fáceis)
• Como Mostrar Fotos de Antes e Depois no WordPress (com Efeito de Deslizamento)
• Como Adicionar uma Galeria no WordPress com Efeito Lightbox
• Como Adicionar Filtros de Foto Estilo Instagram no WordPress (Passo a Passo)
• Como Usar IA para Gerar Imagens no WordPress
• Como Adicionar GIFs Animados no WordPress (Do Jeito CERTO)

Esperamos que este artigo tenha ajudado você a aprender como adicionar efeitos de hover em imagens no WordPress. Você também pode querer ver nossas seleções de especialistas dos melhores plugins de slider para WordPress e nossa lista de fontes de imagens gratuitas de domínio público.

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.