Principais conclusões
- Elementor não possui uma configuração única para alterar uma imagem no hover, portanto a troca é feita com um fundo de contêiner atrás da imagem ou com um widget que aceita uma segunda imagem.
- A maneira sem plug-in de alterar uma imagem no hover no Elementor é definir a segunda imagem como um fundo de contêiner e definir o Opacidade do hover do widget de imagem como 0.
- O widget Imagem Avançada Master Addons troca imagens com um switch, Imagem de Exibição Hover, encontrada na seção Imagem Hover da guia Conteúdo.
- Predefinição de animação Hover da Elementor Grow amplia uma imagem para 110% ao passar o mouse, e a imagem passa pelas bordas originais.
- Um zoom no hover que permanece dentro de seu quadro precisa de uma classe CSS no widget Imagem e três regras CSS curtas que dimensionam a imagem dentro de um estouro oculto.
Para alterar uma imagem no hover no Elementor, você coloca uma segunda imagem atrás ou dentro da primeira e a revela quando o ponteiro chega O elementor pode fazer isso sem um plugin através de um fundo de contêiner, e um widget de imagem hover faz isso com um interruptor O zoom no hover leva uma predefinição para um zoom básico, ou algumas linhas de CSS para um zoom que permanece em seu quadro.
Todos os quatro métodos abaixo foram construídos e testados no Elementor 4.3.
Índice
Qual método usar
Dois desses métodos trocam a imagem e dois a ampliam Dentro de cada par, um usa apenas Elementor e o outro é mais rápido ou mais limpo.
| Gol | Método | Necessidades | Código |
|---|---|---|---|
| Mudar para uma segunda imagem | Fundo do recipiente mais opacidade do hover | elementar | Nenhum |
| Mudar para uma segunda imagem | Widget de imagem avançado | Adições Mestres | Nenhum |
| Amplie a imagem | Animação Hover: Crescer | elementar | Nenhum |
| Zoom dentro de um quadro fixo | Classe CSS no widget Imagem | Elementor e um local para adicionar CSS | Três regras |
Altere uma imagem ao passar o mouse com um fundo de contêiner
Este método não precisa de plugin A segunda imagem é o fundo de um contêiner, e a primeira imagem fica em cima dela como um widget de imagem normal. Ao passar o mouse, a imagem superior desaparece e o fundo aparece.
- Adicione um recipiente e defina seu preenchimento para 0.
- No recipiente Estilo aba, abra Fundo, escolha Clássico e carregue a imagem que deverá aparecer no hover Definir a Posição para Centro Central e Tamanho para Cobrir.
- Arrastar um Imagem widget no recipiente e escolha a imagem que deve mostrar primeiro.
- Selecione o widget Imagem, abra Estilo e mudar para o Pairar guia.
- Definir Opacidade para 0 e Duração Transição para cerca de 0,4.
Use duas imagens com as mesmas proporções O recipiente leva sua altura do widget Imagem, de modo que um fundo com uma forma diferente é cortado.
Altere uma imagem ao passar o mouse com um widget de imagem de hover
Um widget com um campo de imagem hover faz a mesma troca de um painel As etapas abaixo usam o Widget de imagem avançado do Mestre Addons.
- Pesquise no painel de widgets Imagem Avançada e arraste-o para a página.
- No Imagem seção, escolha a imagem principal.
- Abrir o Imagem Hover secção e ligue Exibir imagem do Hover.
- Escolha a segunda imagem no campo que aparece.
- Visualize a página e passe o mouse.
O widget também possui uma fita, um link e uma lightbox, que se adequa às fotos do produto: vista frontal primeiro, vista traseira no hover, com uma fita Nova no canto.
Quer texto no hover? Efeitos de Hover de Imagem anima um título e uma descrição sobre uma imagem, com 30 efeitos para escolher.
Amplie uma imagem ao passar o mouse com a predefinição Crescer
O zoom mais rápido é uma predefinição Selecione o widget Imagem, abrir Estilo, mude para o Pairar guia e conjunto Animação Hover para Crescer. A imagem é dimensionada para 110% enquanto o ponteiro está sobre ela.
Crescer funciona bem para uma única imagem com espaço ao seu redor Em uma grade apertada ela se sobrepõe às imagens ao lado dela, então use o próximo método lá.
Amplie uma imagem ao passar o mouse dentro de seu quadro
Para um zoom que fica dentro da própria caixa da imagem, dê ao widget Imagem uma classe CSS e adicione três regras O widget mantém seu tamanho, e a imagem aumenta dentro dele.
- Selecione o widget Imagem e abra Avançado. Em Aulas CSS, digite
hover-zoom. - Adicione o CSS abaixo ao seu site.
.hover-zoom { overflow: hidden; border-radius: 10px; }
.hover-zoom img { transition: transform 0.4s ease; display: block; }
.hover-zoom:hover img { transform: scale(1.08); }
Para onde vai o CSS depende da sua configuração O Elementor Pro tem uma caixa CSS personalizada na guia Avançado Sem ele, use Aparência, Personalizar, CSS adicional no WordPress ou o Extensão CSS personalizada em Complementos Mestres. Altere 1.08 para 1.15 para um zoom mais forte.
Quatro coisas que dão errado
A maioria dos problemas com esses efeitos vem de tamanhos de imagem e de testes no dispositivo errado.
- As duas imagens têm proporções diferentes A troca então salta ou corta Exportar tanto na mesma largura quanto na mesma altura.
- A imagem ampliada cobre conteúdo próximo Crescer não tem nenhum quadro Use o método CSS quando as imagens se sentam próximas umas das outras.
- Nada acontece em um telefone Telas de toque não têm hover Certifique-se de que a primeira imagem funciona sozinho, porque os visitantes do telefone podem nunca ver o segundo.
- A imagem do hover é pesada Comprima ambos os arquivos, porque uma segunda imagem grande pode ser exibida como um flash em branco no primeiro hover.
Perguntas frequentes
Como altero uma imagem ao passar o mouse no Elementor sem um plugin?
Coloque a imagem do hover em um contêiner como plano de fundo, depois coloque um widget de Imagem com a primeira imagem dentro desse contêiner Na guia Estilo do widget de Imagem, abra a guia Hover e defina Opacidade como 0 com uma Duração de Transição de cerca de 0,4 segundos.
Como faço para ampliar uma imagem ao passar o mouse no Elementor?
Selecione o widget Imagem, abra Estilo, vá para a guia Hover e defina Animação Hover para Crescer Para um zoom que fique dentro do quadro da imagem, adicione uma classe CSS ao widget e dimensione a imagem com transformação dentro de um wrapper que tenha overflow definido como oculto.
O widget Efeitos de pairar imagem pode alterar a imagem no pairar?
No. Image Hover Effects mantém uma imagem e anima um título e descrição sobre ela Para trocar para uma segunda imagem, use o widget Imagem avançada e ative a imagem de exibição Hover ou use o método de fundo do contêiner.
Por que minha imagem se sobrepõe a outros conteúdos quando aumenta o zoom?
A animação Crescer escala toda a imagem além de sua caixa Dê uma classe ao widget Imagem, defina o estouro para escondido nele e dimensione o elemento img dentro A caixa então permanece do mesmo tamanho e clipa o zoom.
Posso alterar a imagem de um produto ao passar o mouse no WooCommerce com isso?
Esses métodos funcionam em imagens que você mesmo coloca no Elementor As grades de produtos geradas pelo WooCommerce ou por um widget de produtos são um caso diferente e dependem do tema ou do widget que os imprime.
Pensamentos finais
Para alterar uma imagem ao passar o mouse no Elementor, use um fundo de contêiner com um widget de imagem desbotado ou um widget com um campo de imagem flutuante. Para ampliar, use Crescer para obter um resultado rápido e a classe CSS quando a imagem precisar permanecer em seu quadro.
O Widget de imagem avançado lida com a troca em um painel e Efeitos de Hover de Imagem abrange sobreposições de texto.
Leitura relacionada
