Principais conclusões
- O widget Master Addons Image Hover Effects para Elementor possui 30 efeitos de hover de imagem, cada um escolhido pelo nome a partir de um menu suspenso Efeito Hover na guia Conteúdo.
- Oito efeitos de pairar de imagem funcionam sem Master Addons Pro: Lily, Sadie, Roxy, Bubba, Romeo, Layla, Honey e Oscar Os outros 22 efeitos precisam de Pro.
- A maioria dos 30 efeitos de hover de imagem mostram um título e uma descrição, seis também mostram ícones sociais, Honey usa um subtítulo e Julia mostra três linhas de texto separadas.
- Cada efeito de hover de imagem no widget é construído com CSS, e cada widget contém uma imagem, portanto, uma grade de cartões de hover é feita de vários widgets.
- Nas telas sensíveis ao toque, os efeitos de hover da imagem geralmente aparecem no primeiro toque, e um segundo toque segue o link.
Efeitos de hover de imagem são animações que são reproduzidas quando o ponteiro se move sobre uma imagem, na maioria das vezes para revelar um título e descrição Abaixo estão 30 deles, todos do Widget de efeitos de passagem de imagem para Elementor, cada um capturado em seu estado de pairar em uma página real Use a lista para escolher um efeito pelo que ele mostra e onde ele se encaixa.
Os efeitos vão pelo nome no widget, então os nomes abaixo são o que você verá no dropdown Os oito primeiros funcionam em cada plano e o resto precisa do Master Addons Pro.
Índice
Como ler esses exemplos
Cada exemplo mostra o cartão enquanto o ponteiro está sobre ele Antes de passar o mouse, a imagem é simples, ou mostra apenas o título, dependendo do efeito A linha sob cada imagem diz o que está na tela e sugere um uso.
O texto, as cores e as fontes são todos seus para mudar. O que um efeito corrige é o layout da sobreposição e como ela chega.
Os 8 efeitos que funcionam sem Pro
Os primeiros oito efeitos no dropdown estão disponíveis em todos os planos Todos os oito têm um título e uma descrição, exceto Honey, que mostra o título com um subtítulo.
1. Lírio
O título e a descrição ficam no canto inferior esquerdo sobre uma imagem levemente esmaecida. Ela se adapta às miniaturas do portfólio onde a foto deve manter o foco.
2. Sadie
O título é centrado e a descrição aparece mais abaixo como uma tonalidade cobre a imagem Ele se adapta a peças de destino e cartões de categoria com um slogan curto.
3. Roxy
Uma moldura fina é desenhada dentro da imagem com o título e a descrição centrados nela. É adequado para blocos de produtos ou serviços que precisam de uma aparência arrumada e em caixa.
4. Bubba
Uma moldura é desenhada ao redor do centro e o título e a descrição ficam dentro dela. Adequa-se a listagens onde cada carta carrega um nome e uma linha de detalhes.
5. Romeu
Duas linhas finas cruzam a imagem, com o título acima do centro e a descrição abaixo. Adequa-se a cartões de propriedades e projetos com uma foto forte.
6. Layla
As linhas horizontais e verticais formam uma moldura aberta em torno do título e da descrição. Adapta-se às grades interiores, arquitetônicas e de galeria.
7. Mel
O título e o Subtítulo compartilham uma linha na parte inferior, acima de uma barra colorida. Adapta-se às categorias de menu e rótulos curtos. Mel é o único efeito que utiliza o campo Subtítulo.
8. Oscar
A imagem escurece e um quadro aparece com o título e a descrição centrados Ele se adapta às categorias da loja e a qualquer cartão com duas linhas curtas de texto.
Passe-os você mesmo. O Página do widget de efeitos de pairar de imagem tem esses oito efeitos como cartas ao vivo.
Os 22 efeitos Pro
Os 22 efeitos restantes precisam do Master Addons Pro. Seis deles adicionam ícones sociais, e um, Julia, mostra três linhas de texto.
9. Marley
O título fica no canto superior direito, uma linha corre sob ele e a descrição aparece no canto inferior direito Ele se adapta a layouts editoriais e cartões de estilo de revista.
10. Rubi
O título fica acima de uma caixa delimitada que contém a descrição. Ele se adapta a peças de recurso onde a descrição é um apelo à ação.
11. Milo
A descrição fica no canto superior direito ao lado de uma linha vertical, e o título está no canto inferior direito Ele se adapta a cartões de imagem com uma legenda e um crédito.
12. Dexter
O título está na parte superior e uma moldura grossa na parte inferior contém a descrição. Adequa-se a peças promocionais ousadas.
13. Sara
O título está no canto superior esquerdo com uma linha sob ele, e a descrição segue abaixo Ele se adapta a cartões de estilo de blog e teasers de estudo de caso.
14. Zoé
Uma barra colorida sobe de baixo com o título e os ícones sociais, e a descrição fica acima dela. É adequado para membros da equipe e cartões de autor.
15. Chico
A imagem escurece dentro de uma moldura, com o título e a descrição centrados. Adequa-se a galerias escuras e cinematográficas.
16. Júlia
O título está no canto superior esquerdo e até três linhas curtas aparecem sob ele, cada uma em seu próprio rótulo Ele se adequa a cartões que precisam de alguns fatos semelhantes a balas Julia tem seu próprio repetidor para essas linhas.
17. Golias
Um painel escuro cobre a parte inferior da imagem e contém o título e a descrição. Adequa-se a cartões com descrições mais longas que necessitam de um fundo sólido.
18. Hera
Um contorno de diamante aparece no centro com o título e quatro ícones sociais. Adequa-se a fotos de perfil e cartões de links sociais.
19. Winston
O título está no topo e uma fileira de ícones sociais aparece ao longo da parte inferior Ele se adapta às grades da equipe, onde cada pessoa tem perfis sociais.
20. Selena
A imagem encolhe dentro de um quadro enquanto o título e a descrição ficam perto do topo Ele se adapta a lookbooks e fotografia de produtos.
21. Terry
A imagem se move para uma janela menor em um fundo escuro, com o título no canto inferior esquerdo e ícones sociais Ele se adapta a cartões de alto-falante e pessoal.
22. Febe
O título é centrado em uma fileira de ícones sociais diretamente abaixo dele. Adequa-se a cartões de perfil simples.
23. Apolo
O título fica no canto superior direito e a descrição no canto inferior direito ao lado de uma linha vertical curta Ele se adapta a peças mínimas do portfólio.
24. Kira
O título está no topo com ícones sociais em um painel de luz sob ele, seguido pela descrição Ele se adapta aos membros da equipe com um papel de uma linha.
25. Steve
O título e a descrição aparecem cada um em sua própria barra branca na imagem. Ele se adapta a rótulos de alto contraste em fotos ocupadas.
26. Moisés
O título fica em uma caixa no canto superior esquerdo e a descrição em uma segunda caixa no canto inferior direito. Adequa-se a rótulos de duas partes, como nome e preço.
27. Jazz
O título e a descrição são centrados e linhas diagonais cortadas nos cantos. É adequado para eventos e obras de arte musicais.
28. Ming
Uma moldura envolve o centro com o título acima da descrição. Adequa-se a cartões formais, como prêmios ou certificados.
29. Lexi
O título está no canto superior esquerdo, e a descrição fica no canto inferior direito dentro de uma linha curva Ele se adapta a produtos lúdicos e peças de estilo de vida.
30. Duque
O título está no topo e a descrição fica em uma caixa na parte inferior esquerda Ele se adapta a cartões com um rótulo curto que deve ser lido como uma etiqueta.
Todos os 30 efeitos de pairar de imagem em uma tabela
Esta tabela lista todos os efeitos com as camadas de texto que mostra e se precisa de Pro.
| Efeito | Mostra em hover | Precisa Pro |
|---|---|---|
| Lírio | Título e descrição | Não |
| Sadie | Título e descrição | Não |
| Roxy | Título e descrição | Não |
| Bubba | Título e descrição | Não |
| Romeu | Título e descrição | Não |
| Layla | Título e descrição | Não |
| Mel | Título e subtítulo | Não |
| Oscar | Título e descrição | Não |
| Marley | Título e descrição | Sim |
| Rubi | Título e descrição | Sim |
| Milo | Título e descrição | Sim |
| Dexter | Título e descrição | Sim |
| Sara | Título e descrição | Sim |
| Zoe | Título, descrição e ícones sociais | Sim |
| Chico | Título e descrição | Sim |
| Júlia | Título e três linhas | Sim |
| Golias | Título e descrição | Sim |
| Hera | Título e ícones sociais | Sim |
| Winston | Título e ícones sociais | Sim |
| Selena | Título e descrição | Sim |
| Terry | Título e ícones sociais | Sim |
| Febe | Título e ícones sociais | Sim |
| Apolo | Título e descrição | Sim |
| Kira | Título, descrição e ícones sociais | Sim |
| Steve | Título e descrição | Sim |
| Moisés | Título e descrição | Sim |
| Jazz | Título e descrição | Sim |
| Ming | Título e descrição | Sim |
| Lexi | Título e descrição | Sim |
| Duque | Título e descrição | Sim |
Como adicionar um desses efeitos no Elementor
Adicionar um efeito requer um widget e um dropdown.
- Edite sua página com Elementor e arraste o Efeitos de Hover de Imagem widget nele.
- Carregue a imagem em Efeitos e imagem.
- Escolha o efeito pelo nome Efeito Hover.
- Preencha o Título e Descrição. Efeitos com ícones mostram uma seção Links Sociais também.
- Definir Links ou Popup? se um clique deve levar a algum lugar.
Para uma grade, coloque um widget por coluna e use o mesmo efeito em toda a linha Nosso guia passo a passo para adicionando efeitos de hover de imagem no Elementor cobre as opções incorporadas também Para as legendas que ficam na imagem, veja Elementor texto sobre imagem.
Perguntas frequentes
O que são efeitos de hover de imagem?
Efeitos de hover de imagem são animações que são executadas quando um visitante move o ponteiro sobre uma imagem A imagem pode ampliar, escurecer ou mudar de cor, e um título ou descrição geralmente desliza ou desaparece sobre ela Eles também são chamados de efeitos de rollover de imagem ou sobreposições de imagem.
Quais efeitos de hover de imagem funcionam sem o Master Addons Pro?
Oito dos 30: Lily, Sadie, Roxy, Bubba, Romeo, Layla, Honey e Oscar. Eles são as primeiras oito entradas no dropdown do Efeito Hover Os 22 restantes, de Marley a Duke, precisam do Master Addons Pro.
Posso usar um efeito de hover diferente em cada imagem?
Sim. Cada widget de efeitos de hover de imagem contém uma imagem e um efeito, para que cada cartão em uma grade possa ter o seu próprio. Para uma página organizada, mantenha um efeito por linha ou por seção.
Esses efeitos de hover de imagem precisam de CSS personalizado?
Não. Você escolhe o efeito de um dropdown e o widget fornece o CSS. Cores, opacidade e tipografia são definidas na guia Estilo. Se você preferir escrever o CSS sozinho, algumas linhas no widget Imagem do Elementor podem produzir efeitos simples, como zoom ou escala de cinza.
Qual efeito de hover é melhor para uma seção de equipe?
Efeitos com ícones sociais cabem nas cartas da equipe: Zoe, Hera, Winston, Terry, Phoebe e Kira Zoe e Kira também mostram uma descrição, que funciona como o papel da pessoa Todos os seis precisam de Master Addons Pro.
Pensamentos finais
Esses 30 efeitos de hover de imagem cobrem a maioria dos layouts que você precisará: legendas de canto, quadros centrados, barras, painéis e linhas de ícones Escolha pelo texto que você tem Um título curto combina com Lily ou Oscar, uma descrição mais longa combina com Golias e links sociais chamam Zoe ou Winston.
O Página do widget de efeitos de pairar de imagem tem cartas ao vivo para experimentar, e o página preços lista os planos que incluem todos os 30.
Leitura relacionada
