Principais conclusões
- Os efeitos de hover do elementor para imagens vivem na guia Estilo do widget Imagem, sob uma guia Hover com quatro controles: Opacidade, Filtros CSS, Duração da Transição e Animação Hover.
- Um efeito de hover de tons de cinza para cores no Elementor não precisa de código: defina Saturação como 0 em Filtros CSS na guia Normal e volte para 100 na guia Hover.
- As predefinições Hover Animation da Elementor, como Grow, movem toda a imagem, e a predefinição Grow dimensiona uma imagem para 110% de seu tamanho ao passar o mouse.
- O widget Imagem do Elementor não pode mostrar um título ou descrição sobre a imagem no hover, portanto, as sobreposições de texto precisam de uma solução alternativa de contêiner, CSS personalizado ou um widget de complemento.
- O widget Master Addons Image Hover Effects possui 30 efeitos de hover nomeados que animam um título e uma descrição sobre a imagem, escolhidos a partir de um dropdown do Hover Effect.
Você pode adicionar efeitos de hover Elementor a uma imagem de três maneiras O widget Imagem tem configurações de opacidade e filtro CSS para o estado de hover Ele também tem predefinições de Animação Hover que movem a imagem Para um título e descrição que aparecem sobre a imagem, você precisa de um widget construído para ele, como Efeitos de Hover de Imagem.
Este guia cobre cada rota com as configurações exatas, testadas no Elementor 4.3. comece com os dois primeiros se você quiser que a imagem reaja apenas e pule para o terceiro se quiser texto na imagem.
Índice
Onde as configurações de hover estão no Elementor
Selecione um widget Imagem, abra o Estilo aba e olhar sob a seção Imagem Abaixo dos controles de tamanho há duas abas, Normal e Hover Tudo na guia Hover se aplica apenas enquanto o ponteiro está sobre a imagem Elementor explica a ideia em seu introdução aos efeitos hover.
| Controle | O que faz no hover |
|---|---|
| Opacidade | Desaparece a imagem para dentro ou para fora, de 0 a 1 |
| Filtros CSS | Muda o desfoque, brilho, contraste, saturação e matiz |
| Duração Transição | Define quanto tempo demora a mudança, em segundos |
| Animação Hover | Reproduz um movimento predefinido como Crescer |
Caminho 1: Filtros de opacidade e CSS
Use filtros de opacidade e CSS quando a imagem em si mudar ao passar o mouse. O exemplo clássico é uma foto que fica em preto e branco e vira para cor quando o ponteiro chega.
- Selecione o widget Imagem e abra Estilo.
- No normal tab, clique no lápis ao lado Filtros CSS e arrastar Saturação para 0. A imagem fica cinza.
- Mudar para o Pairar aba, abra Filtros CSS novamente e defina Saturação para 100.
- Definir Duração Transição para cerca de 0,4, então a cor desaparece.
- Opcional: defina Opacity para 0,85 no Normal e 1 no Hover para um leve brilho.
As mesmas duas abas dão-lhe um borrão que limpa, uma imagem fraca que ilumina, ou uma mudança de matiz Mantenha a transição entre 0,3 e 0,5 segundos Mais curto do que parece uma cintilação, e mais longo parece lento.
Way 2: Predefinições de animação Hover
Hover Animation move toda a imagem quando o ponteiro está sobre ele É um dropdown na parte inferior da guia Hover, e não precisa de outra configuração.
- Selecione o widget Imagem e abra Estilo, então o Pairar guia.
- Aberto Animação Hover e escolha uma predefinição. Crescer é aquele que a maioria das pessoas deseja.
- Visualize a página e mova o ponteiro sobre a imagem.
Grow amplia a imagem além de suas bordas originais, para que ela possa se sobrepor aos seus vizinhos em uma grade compacta. Se você quiser que a imagem amplie dentro de um quadro fixo, isso exige algumas linhas de CSS.
Caminho 3: Um widget para texto sobre a imagem
Use um widget dedicado quando um título e uma descrição devem aparecer sobre a imagem no hover O widget Imagem do Elementor mostra sua legenda sob a imagem e não tem configuração para colocar texto no topo.
Essas etapas usam o widget Efeitos de pairar imagem dos complementos mestres.
- Edite a página com Elementor, procure no painel de widgets Efeitos de Hover de Imagem e arraste-o para a página.
- Sob Efeitos e imagem, carregue a imagem.
- Abrir o Efeito Hover dropdown e escolha um dos 30 efeitos Eles estão listados pelo nome, começando com Lily, Sadie, Roxy e Bubba.
- Digite o Título e o Descrição em suas próprias seções.
- Definir Links ou Popup? se um clique deve ir para algum lugar.
- Na guia Estilo, defina a cor de sobreposição, a opacidade da imagem para normal e pairar e a tipografia para cada camada de texto.
Experimente os efeitos antes de instalar qualquer coisa. O Página do widget de efeitos de pairar de imagem tem oito cartões ao vivo que você pode passar o mouse, além da lista completa de 30 efeitos.
Oito dos efeitos funcionam sem licença Pro e 22 precisam do Master Addons Pro. Cada widget contém uma imagem, portanto, uma grade de placas flutuantes contém vários widgets lado a lado.
Tutorial vídeo
Este vídeo de quatro minutos configura o widget Image Hover Effects a partir de uma página vazia.
Qual caminho você deve usar?
Escolha o que deve mudar ao passar o mouse: a imagem, sua posição ou o texto em cima dela.
| Você quer | Usar | Necessidades |
|---|---|---|
| Escala de cinza a colorida, desfocada a aguda, fraca a brilhante | Filtros CSS e Opacidade na guia Hover | elementar |
| A imagem a crescer ou pulsar | Animação Hover | elementar |
| Um zoom que fica dentro de sua moldura | Uma classe CSS e algumas linhas de CSS | Elementor e algum lugar para adicionar CSS |
| Um título e descrição sobre a imagem | Widget de efeitos de passagem de imagem | Adições Mestres |
| Uma segunda imagem que substitui a primeira | Widget de imagem avançada ou fundo de contêiner | Addons Mestres, ou Elementor sozinho |
Para textos e imagens combinados de outras maneiras, consulte Elementor texto sobre imagem.
Os efeitos de hover funcionam em telefones?
Não como hover, porque uma tela sensível ao toque não tem ponteiro para pairar com. Os efeitos de guia Estilo do Elementor não disparam em um telefone, o que não faz mal a uma mudança de cor.
Com o widget Efeitos de Imagem Hover, o primeiro toque geralmente mostra o texto e o segundo toque segue o link Se o texto é essencial, como um preço ou um nome, coloque-o em algum lugar visível em telas pequenas também.
Perguntas frequentes
Como adiciono um efeito hover a uma imagem no Elementor?
Selecione o widget Imagem, abra a guia Estilo e mude para a guia Hover Defina Opacidade ou Filtros CSS para o estado de hover, ou escolha uma Animação de Hover como Crescer Adicione uma Duração de Transição de 0,3 a 0,5 segundos para que a alteração seja suave.
Elementor tem efeitos de hover de imagem sem um plugin?
Sim. o widget Imagem no Elementor tem controles de hover para opacidade, filtros CSS e uma predefinição Animação Hover Eles alteram ou movem a imagem O texto sobre a imagem precisa de um widget de addon ou CSS personalizado.
Como faço uma imagem passar do preto e branco para a cor ao passar o mouse no Elementor?
Na guia Estilo do widget de Imagem, abra Filtros CSS na guia Normal e defina Saturação como 0. em seguida, abra Filtros CSS na guia Hover e defina Saturação como 100. defina Duração de Transição para cerca de 0,4 segundos.
Como mostro texto ao passar o mouse sobre uma imagem no Elementor?
Use um widget feito para ele Com os Complementos Mestres, adicione o widget Efeitos de Passeio de Imagem, carregue a imagem, digite um Título e Descrição e escolha um Efeito de Passeio O texto permanece oculto até que o ponteiro esteja sobre a imagem.
Por que meu efeito de hover Elementor não está funcionando?
Verifique se a configuração está na guia Hover e não na guia Normal, e se a Duração da Transição está acima de 0. em um telefone ou tablet não há hover, então teste com um mouse Se você usar CSS personalizado, confirme o nome da classe no widget corresponde ao do código.
Pensamentos finais
Os efeitos de hover do elementor para imagens vêm em três tipos A guia Estilo muda a aparência da imagem, a Animação Hover a move e uma sobreposição de texto precisa de um widget Comece com os controles integrados, pois eles não custam nada para serem tentados.
Quando você deseja um título e uma descrição na imagem, o Widget de efeitos de passagem de imagem tem 30 efeitos prontos para serem escolhidos, e o página preços mostra qual plano inclui todos eles.
Leitura relacionada
