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 hover de imagem é uma animação que dispara quando alguém move o mouse sobre uma imagem Em vez de permanecer plana, a imagem reage Pode ampliar, desfocar, mudar de cor ou deslizar um painel de texto em vista O tipo mais comum é uma sobreposição de imagem, onde um título e descrição aparecem como texto sobre a imagem Você também os verá 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.
Exemplos de efeitos de hover de imagem
Mova o ponteiro sobre cada cartão, ou toque nele em um telefone, para ver o efeito Estes oito são os efeitos que funcionam sem Pro, e cada cartão é um widget de efeitos de hover de imagem ao vivo.
Ella e Sam
Somerset · junho
Lírio
Grécia
11 dias
Sadie
Piso principal
Cardio e máquinas
Roxy
Fantasma
12.400 milhas
Bubba
Casa do Penhasco
4 camas · EPC B
Romeu
Galeria Parede
Bristol · 2025
Layla
Iniciantes Nove pratos
Mel
Roupa exterior
87 peças
Oscar
Todos os 30 efeitos de hover de imagem
O dropdown do Efeito Hover lista 30 efeitos pelo nome Cada um anima o título e a descrição sobre a imagem, e eles diferem em como a sobreposição, o texto e a imagem se movem.
| Efeito | Precisa Pro | Efeito | Precisa Pro |
|---|---|---|---|
| Lírio | Não | Júlia | Sim |
| Sadie | Não | Golias | Sim |
| Roxy | Não | Hera | Sim |
| Bubba | Não | Winston | Sim |
| Romeu | Não | Selena | Sim |
| Layla | Não | Terry | Sim |
| Mel | Não | Febe | Sim |
| Oscar | Não | Apolo | Sim |
| Marley | Sim | Kira | Sim |
| Rubi | Sim | Steve | Sim |
| Milo | Sim | Moisés | Sim |
| Dexter | Sim | Jazz | Sim |
| Sara | Sim | Ming | Sim |
| Zoe | Sim | Lexi | Sim |
| Chico | Sim | Duque | Sim |
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.
Texto sobre imagem: título, descrição e estilo de sobreposição
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.
Opções de passagem de elementor vs o widget Efeitos de passagem de imagem
O widget de imagem do próprio Elementor possui configurações de hover na guia Estilo: Opacidade, Filtros CSS e uma Animação de Hover como Crescer ou Pulsar Eles alteram a imagem em si Eles não podem colocar texto sobre a imagem, que é a lacuna que esse widget preenche.
| Widget de imagem Elementor | Widget de efeitos de passagem de imagem | |
|---|---|---|
| Opacidade no hover | Sim | Sim |
| Filtros CSS no hover | Sim | Sim |
| Animação hover | Predefinições que movem toda a imagem | 30 efeitos que animam a sobreposição, título e descrição |
| Texto sobre a imagem | Não. A legenda fica embaixo da imagem. | Título e descrição na imagem |
| Texto que aparece no hover | Não | Sim |
| Clique ação | Link ou lightbox | Link, ou um pop-up com Pro |
| Troque para uma segunda imagem ao passar o mouse | Não | Não. Usar Imagem Avançada por isso. |
Visão geral dos efeitos do imagem Hover
Os principais fatos sobre o widget em uma tabela.
| Característica | Efeitos de Hover de Imagem |
|---|---|
| Efeitos hover | 30.22 deles precisam do Pro. |
| Texto na imagem | Título e descrição, com uma tag HTML de H1 a H6 para o título |
| Clique ação | Nenhum, um link ou um pop-up (Pro) |
| Conteúdo pop-up (Pro) | Texto, uma imagem ou uma seção salva, widget ou modelo de página |
| Configurações imagem | Opacidade e filtros, definidos separadamente para normal e pairar |
| Segunda imagem no hover | Não |
| Telas de toque | O primeiro toque mostra o texto O segundo toque segue o link. |
| Necessidades | Complementos Elementor e Master |
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.
Como mostro texto quando alguém passa o mouse sobre uma imagem no Elementor?
Adicione o widget Efeitos de Imagem Hover, carregue a imagem, digite um Título e uma Descrição e escolha um Efeito Hover O texto fica oculto até que o ponteiro esteja sobre a imagem, então anima em O widget de Imagem do próprio Elementor não tem configuração para texto sobre a imagem.
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.
Como faço para ampliar uma imagem ao passar o mouse no Elementor?
Para um zoom simples, selecione o widget Imagem do Elementor, abra a guia Estilo e defina Animação de Hover para Crescer No widget Efeitos de Hover de Imagem, vários efeitos escalam a imagem enquanto o título e a descrição entram.
Posso alterar a imagem no hover?
Não com este widget Ele mantém uma imagem e anima a sobreposição e o texto em cima dela Para trocar para uma segunda imagem no hover, use o Imagem Avançada widget e ativar Exibir imagem do Hover.
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
