Elementor Image Hover Effects: 30 Animações Hover para Imagens
Uma imagem estática apenas fica lá Adicione efeitos de hover de imagem e a mesma imagem começa a fazer algum trabalho: um título desliza, uma descrição desaparece e um clique envia as pessoas para um link ou abre um pop-up completo O widget Image Hover Effects para Elementor é fornecido com 30 animações de hover (8 no plugin gratuito e mais 22 com Pro) e você as configura sem escrever uma linha de CSS Ele se encaixa nos locais onde uma imagem tem que levar um título, uma legenda e uma ação: portfólios, grades de equipe, cartões de serviço, vitrines de produtos.
Escolha um efeito, escolha o que o clique faz e estilize cada camada para combinar com seu design O que você acaba é um cartão de imagem em que as pessoas realmente param em vez de rolar por cima O vídeo abaixo percorre toda a coisa, mostra cada animação e a configuração leva alguns minutos.
O que são efeitos de imagem?
Um efeito de pairar de imagem é uma animação que dispara quando alguém move o mouse sobre uma imagem Em vez de ficar plana, a imagem reage Pode ampliar, desfocar, mudar de cor, ou deslizar um painel de texto em vista Você também vai vê-los chamados efeitos de rollover de imagem ou efeitos de foto hover, e todos eles fazem a mesma coisa: pegue uma imagem simples e faça com que seja lida como “há mais aqui, clique em mim.”
Você pode construir tudo isso à mão com CSS personalizado Isso significa escrever as transições, fazê-los se comportar no celular e voltar ao código toda vez que o design mudar O widget Master Addons lida visualmente com elementor, então você obtém efeitos simples de hover de imagem sem abrir um editor de código Se você quiser ver o resto do kit de ferramentas, navegue pelo Widgets e extensões Master Addons ou o Recursos de animação do elementor.
30 animações hover, 8 delas gratuitas
Primeiras impressões acontecem no hover Você obtém uma biblioteca de animações CSS que trazem seu título e descrição sem problemas, então o texto chega em vez de apenas aparecer na tela Aplique qualquer efeito com um clique e, em seguida, percorra-os no editor até que um se adapte à imagem. Normalmente tento três ou quatro antes de me estabelecer, já que um efeito que fica ótimo em uma cena ampla da paisagem pode parecer errado em uma colheita apertada de retratos.
- Desaparecer e ampliar: a imagem desaparece ou aumenta enquanto o texto desaparece.
- Slide (para cima, para baixo, para a esquerda, para a direita): um painel de legendas desliza de qualquer borda.
- Empurre e revele: a imagem muda para dar lugar ao título e à descrição.
- Flutuar e brilhar: um pequeno elevador e uma luz varrer a imagem.
- Oito efeitos são gratuitos: Lily, Sadie, Roxy, Bubba, Romeo, Layla, Honey e Oscar Pro adiciona mais 22, de Marley a Duke.
- Executa em CSS: o movimento permanece suave porque não depende de scripts pesados.
- Rápido para testar: troque efeitos no editor e veja a mudança imediatamente.
Linking inteligente e conteúdo pop-up no clique
Você decide o que acontece quando alguém clica no cartão Aponte-o para qualquer URL com um link padrão, ou, com o Pro, mude a ação para Popup e mantenha as pessoas na página O popup também não se limita ao texto: defina Tipo de Conteúdo para Seção Salva e ele puxa qualquer modelo Elementor que você já construiu Isso transforma um cartão de imagem em uma porta para uma biografia completa, uma folha de especificações do produto ou um formulário de contato, e o visitante nunca sai da página.
- Duas ações de clique: envie tráfego com um link ou mantenha as pessoas no local com um pop-up (Pro).
- Modelos reais no pop-up (Pro): mostre uma imagem, texto ou um layout completo da sua biblioteca.
- Provocar, então diga: a imagem é o gancho e o pop-up carrega o detalhe.
Conteúdo Completo e Controle de Estilo
Você controla como o cartão olha para baixo para o detalhe Carregue sua imagem e defina sua opacidade e filtre separadamente para os estados normal e de pairar Adicione um cabeçalho (escolha a tag HTML certa para que ajude sua estrutura de página) e uma descrição, em seguida, estilo cada peça por conta própria com suas próprias cores, tipo, sombras e espaçamento.
- Título e descrição separados: estilo cada um para que a hierarquia lê claramente.
- Filtros de imagem: o truque de escala de cinza para cor no hover ainda parece bom e é uma mudança única aqui.
- Quadro do cartão: fundo, bordas e sombra de caixa, além de cantos arredondados e preenchimento com Pro, para que fique bem no seu layout.
Como adicionar efeitos de hover de imagem no elementor?
Você pode ter um cartão de hover de trabalho em menos de dois minutos Sem CSS, sem códigos de acesso.
- Instale e ative Master Addons e edite qualquer página com Elementor.
- Pesquise no painel de widgets Efeitos de Hover de Imagem e arraste-o para o seu layout.
- Carregue a sua imagem e adicione um título e uma descrição.
- Abra o dropdown do efeito Hover e escolha uma animaçãoOito são gratuitos e mais 22 vêm com Pro.
- Defina a ação de clique para um link ou para um pop-up com um modelo salvo se você tiver Pro.
- Estile o título, a descrição e o contêiner e publique.
Uma coisa que vale a pena fazer antes de publicar: visualize o cartão em um telefone O Hover não existe ao toque, então verifique se o comportamento do toque faz sentido (mais sobre isso no FAQ).Para cada configuração definida em ordem, siga o Documentação do Image Hover Effects.
Onde usar efeitos de hover em imagens?
- Grades da equipe: nome e função no hover, em seguida, uma biografia completa em um pop-up no clique Aqui é como construir uma seção de membros da equipe.
- Portfólios e galerias: um título de projeto e um link “View case study” sobre cada foto.
- Cartões de serviço: uma breve descrição e um link para a página de serviço.
- Vitrines de produtos: provoque a imagem do produto e abra as especificações em um pop-up.
- Blocos de blog e categoria: uma legenda de hover na navegação conduzida por imagem.
Para mais maneiras de juntar texto e imagens, leia 25 Técnicas de elemento texto sobre imagem. Widgets de imagem relacionados incluem o Carrossel de Imagem, o Galeria de imagens filtráveis, o Hotspot de imagem widget e o Imagem Avançada widget.
Perguntas frequentes sobre efeitos de imagem
Esses efeitos de hover funcionarão em dispositivos móveis?
Eles são construídos para desktop, onde há um mouse para pairar Em uma tela sensível ao toque o efeito geralmente dispara no primeiro toque para mostrar o conteúdo, e o segundo toque segue o link ou abre o pop-up Então planeje dois toques no celular, e certifique-se de que o texto permaneça legível assim que for mostrado.
Como faço para criar efeitos simples de hover de imagem sem escrever CSS?
Solte o widget Efeitos de Hover de Imagem em sua página, carregue uma imagem, adicione um título e descrição e escolha uma animação do dropdown, Isto é, sem CSS O widget escreve o CSS para você nos bastidores, então até mesmo um cartão de hover bastante envolvido permanece fácil de montar.
Posso abrir uma biografia da equipe ou detalhes do produto em um pop-up ao clicar?
Sim, com o Pro. Coloque o nome no Título e a função na Descrição, defina a ação clicar como Popup e escolha Tipo de conteúdo: Seção salva Construa a biografia como um modelo no Elementor e selecione-a aqui Clique na foto e esse layout completo será aberto no pop-up.
Todos os 30 efeitos de pairar de imagem são gratuitos?
No Oito efeitos são gratuitos: Lily, Sadie, Roxy, Bubba, Romeo, Layla, Honey e Oscar Os outros 22 vêm com Master Addons Pro, juntamente com conteúdo pop-up, cantos arredondados e controles de preenchimento O título, descrição, link e filtros de imagem todos funcionam na versão gratuita.
Muitos cartões de imagem animados irão desacelerar meu site?
Os efeitos são executados em CSS, então um punhado em uma página não é problema O que realmente retarda as coisas é o peso da imagem, então comprima suas imagens primeiro Uma vez que você já passou de 20 ou mais cartões em uma página, ligue o carregamento preguiçoso e a primeira tinta permanece rápida.
Posso usar diferentes efeitos de hover em imagens diferentes?
As configurações cobrem um cartão de cada vez Para misturar efeitos, adicione um widget separado de Efeitos de Passeio de Imagem para cada imagem e configure-os de forma independente É assim que você obtém uma galeria onde os cartões não animam todos da mesma maneira.
Qual é o benefício de uma "Seção Salva" no pop-up em vez de texto simples?
Seção salva é uma opção Pro, e dá-lhe o editor completo Elementor dentro do pop-up Em vez de texto simples você pode adicionar imagens, botões, colunas, vídeos ou formulários, assim o pop-up parece o resto do seu site em vez de uma caixa de texto nua.
Widgets e extensões de elementos de tendência
Construa sites sofisticados em menos tempo.
Glassmorphismo
Contêiner Extras
Padrões
![Extensão Master Addons Post/Page Duplicator para Elementor: MA Link de linha Duplicator na lista de páginas WordPress criando uma página de destino - rascunho [duplicado #128]](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Duplicador de postagem/página
