Efeitos de Hover de Imagem
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 mais de 30 animações de hover (desvanecer, ampliar, deslizar, empurrar e o resto) e você os configura sem escrever uma linha de CSS. Ele se encaixa nos lugares 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 pairar 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 Você também vai vê-los 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.
Mais de 30 animações Hover pré-construídas
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 estranho 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.
- Bastante para escolher: silencioso desaparece em uma extremidade, slides direcionais ousados na outra.
- 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.
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 mude a ação para Popup e mantenha as pessoas na página O popup também não se limita ao texto: defina o 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.
- Modelos reais no pop-up: use texto simples ou coloque um layout completo em sua biblioteca.
- Provocar, então diga: a imagem é o gancho e o pop-up carrega o detalhe.
Conteúdo Completo e Controle de Estilo
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, cantos arredondados, preenchimento e sombra de caixa, para que fique bem no seu layout.
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 menu suspenso Efeito Hover e escolha uma das mais de 30 animações.
- Defina a ação de clique para Link ou Popup e escolha um modelo salvo para conteúdo pop-up.
- 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, ou olhe para widgets de imagem relacionados como o widget de ponto de acesso de imagem e o Carrossel de imagem do elementor.
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. coloque o nome no Título e a função na Descrição, defina a ação de clique para Popup e escolha Tipo de conteúdo: Seção salva. Construa a biografia como modelo no Elementor e selecione-a aqui. Clique na foto e esse layout completo será aberto no pop-up.
Como escolho entre um link e um pop-up?
Use um link quando quiser mover o visitante para outra página, como uma página de produto ou uma postagem no blog Use um pop-up quando quiser mostrar mais sem sair da página atual: especificações, uma breve biografia, um formulário de contato ou uma visão maior da 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?
Uma Seção Salva fornece o editor completo do Elementor dentro do pop-up Em vez de texto simples, você pode adicionar imagens, botões, colunas, vídeos ou formulários, para que o pop-up se pareça com o resto do seu site, em vez de uma caixa de texto simples.
Widgets e extensões de elementos de tendência
Construa sites sofisticados em menos tempo.
Glassmorphismo
Contêiner Extras
Padrões
Duplicador de postagem/página
