Divi Imagem HoverEfeitos
Virar cartão
Deslizar
Efeitos de foco de imagem Divi – 15 animações
Transforme suas imagens em experiências interativas. Divi Image Hover Effects é ummódulo Divi 5 nativoque adiciona animações de foco impressionantes e conteúdo de sobreposição a qualquer imagem - diretamente dentro do Divi Visual Builder, sem necessidade de codificação.
🃏 Flip Cards — Integrados
Virar horizontalmentetransforme sua imagem em uma verdadeiraCartão flip 3D: a frente mostra sua imagem, a parte traseira revela seu conteúdo de sobreposição com uma mudança de perspectiva satisfatória. Perfeito para membros de equipe, peças de portfólio, vitrines de produtos ou qualquer situação em que você queira revelar informações com impacto.
🎬 15 efeitos de flutuação artesanais
- Desaparecer— revelação clássica de opacidade com um aumento sutil de conteúdo
- Deslize para cima/para baixo/esquerda/direita— slides de sobreposição direcional
- Ampliar— a imagem aumenta conforme a sobreposição aparece
- Diminuir zoom- a imagem começa ampliada, recua ao passar o mouse
- Virar horizontalmente- virar cartão 3D completo com perspectiva
- Borrão- a imagem suaviza à medida que seu conteúdo ocupa o centro das atenções
- Tons de cinza- a imagem fica dessaturada ao passar o mouse para um contraste impressionante
- Brilhar- um leve brilho varre a imagem
- Saltar— a sobreposição surge de baixo com energia elástica
- Revelar Esquerda → Direita- revelação do caminho do clipe em estilo cortina
✨ Conteúdo rico de sobreposição
Construa sua sobreposição visualmente, exatamente como você deseja:
- Fundo de sobreposição – cor sólida ou completagradiente(cor inicial, cor final, direção)
- Posição do conteúdo -9 pontos de ancoragem(canto superior esquerdo, centro, canto inferior direito…)
- Ícone – escolha qualquer ícone Divi, defina sua cor e tamanho
- Título – escolha a tag HTML (H1–H6 ou P) e estilize-a totalmente
- Descrição — corpo do texto com controle tipográfico completo
- Botão de call to action – URL, suporte para nova guia e opainel completo de design de botão Divi(fundo, borda, fonte, espaçamento, dimensionamento, sombra da caixa)
⚙️ Controles de animação de precisão
Ajuste tudo diretamente no Visual Builder sem sair da sua página:
- Animaçãovelocidade— qualquer duração CSS válida (
0.3s,500ms…) - Animaçãofacilitando- Facilidade, Facilidade de entrada, Facilidade de saída, Facilidade de entrada, Linear
🎨 Personalização completa do design Divi
Como o Divi Image Hover Effects é um verdadeiro módulo nativo do Divi 5, você tem acesso aosistema de design Divi completo— as mesmas ferramentas que você usa em todos os outros módulos:
- Controles de tipografia para título, descrição e botão
- Planos de fundo, gradientes e imagens no módulo
- Bordas, sombras de caixa e raio da borda
- Espaçamento (margem
- Filtros, transformações e animações
- Posicionamento fixo, efeitos de rolagem e índice z
- Visibilidade responsiva e CSS personalizado por ponto de interrupção
Tudo o que você espera de um módulo Divi – pronto para uso.
🔍 Visualização do True Visual Builder
A sobreposição está sempre visível na tela para que você possa editar seu conteúdo confortavelmente. Ativarmodo pairarno painel Design para visualizar seus estilos de foco — cores, transições e animações invertidas — exatamente como os visitantes os verão.
♿ Desempenho
- Imagens usam nativocarregamento lentopara velocidades de página rápidas
- Animações automaticamentedesativar para usuários que preferem movimento reduzido(
prefers-reduced-motion) - Transições aceleradas por GPU para renderização suave de 60fps
📋 Requisitos
- Divi 5 (não compatível com Divi 4)
- WordPress 6.0
- PHP 7.4
