Uma imagem que revela um título e legenda no hover transforma uma galeria plana em algo que as pessoas querem tocar O Efeitos de Hover de Imagem widget em Complementos Mestres para Elementor envolve qualquer imagem em uma animação de hover CSS, portanto, um título, uma descrição e um slide de link, desbotam ou aumentam a visualização quando o cursor pousa nela.
Esta página é a referência de configurações Para demonstrações ao vivo dos efeitos e o que é gratuito ou Pro, consulte o Widget de efeitos de passagem de imagem do elementor página.
Você escolhe um dos efeitos nomeados, coloca uma imagem, adiciona o texto de sobreposição e, em seguida, estiliza as cores e filtros Nenhum CSS personalizado necessário Este guia cobre todas as configurações do widget.
O que o widget Efeitos de Imagem Hover faz #
O widget pega uma imagem e deixa cair uma sobreposição animada em cima Passe o mouse sobre ela e ela pode revelar um título, uma descrição e um botão ou link, com o movimento vindo de um efeito predefinido Existem 30 efeitos nomeados Oito são gratuitos (Lily, Sadie, Roxy, Bubba, Romeo, Layla, Honey e Oscar) e mais 22 vêm com Master Addons Pro.
Três guias o executam. Conteúdo contém o efeito, a imagem e o texto de sobreposição. Estilo lida com a opacidade da imagem, filtros, bordas e as cores do título e da descrição. Avançado é o espaçamento e visibilidade usuais do Elementor.
Antes de começar #
- WordPress com Elementor instalado e ativo.
- Complementos Mestres para Elementor instalado e ativo. Novo no plugin? veja o guia instalação.
- Uma imagem, além do texto do título e da legenda que você deseja mostrar ao passar o mouse.
Como adicionar o widget Efeitos de Imagem Hover #
No editor Elementor, abra o Elementos painel e pesquisa Efeitos de Hover de Imagem, ou role para a seção Master Addons (os widgets carregam um emblema MA roxo).Arraste-o para a página e ele carrega com uma imagem de amostra e sobreposição que você pode editar.
Escolha o efeito e a imagem #
Abrir o Conteúdo guia. O Efeitos e imagem seção é onde você define a animação hover e carrega a imagem.
- Efeito Hover: a animação nomeada usada no hover (mais sobre esta próxima).
- Carregar imagem: escolha a imagem da biblioteca de mídia.
- Tamanho da imagem e resolução da imagem: a colheita e a resolução serviram.
- Links ou pop-up?: faça da imagem inteira um link ou abra um pop-up (o conteúdo pop-up precisa de Pro).
Escolha um efeito hover #
O Efeito Hover o dropdown lista 30 efeitos CSS nomeados Os oito primeiros são gratuitos e os restantes são marcados como Pro. Cada um anima a imagem e o texto de sobreposição de forma diferente, desde um fade suave até uma legenda que desliza para dentro.
- Sadie, Lily, Layla: desvanece o título e a legenda sobre uma imagem escurecida.
- Roxy, Bubba, Romeu: deslize uma borda ou painel com o texto.
- Querido, Oscar, Marley (Pro): revele um sublinhado ou uma legenda móvel.
- Variantes de zoom e desfoque: dimensione ou suavize a imagem por trás do texto.
Selecione a imagem #
Clique Carregar Imagem para abrir a biblioteca de mídia, escolha ou carregue sua imagem. Qualquer efeito que você escolher é executado em cima desta imagem.
Adicionar a rubrica #
Abrir o Título seção para o título que mostra no hover Digite o texto e defina a tag HTML para que ela seja lida corretamente para SEO.
- Título: o texto do título. Se o seu site usa Elementor AI, o link Write with AI do próprio Elementor também aparece aqui.
- Tag HTML: o nível de rumo, H1 a H6.
Adicione a descrição e o link #
Abrir o Descrição seção para adicionar a legenda que aparece sob o título no hover Voltar para dentro Efeitos e imagem, se você definir Links ou Popup? ao Popup, o Tipo de conteúdo e Conteúdo campos decidem o que o popup mostra Conteúdo popup precisa Pro.
- Tipo de conteúdo: o que o pop-up mostra: uma imagem, texto, uma seção salva, um widget salvo ou um modelo de página salva (Pro).
- Conteúdo: o texto pop-up, editado em uma caixa WYSIWYG completa.
- Links ou pop-up?: aponte a imagem para um URL ou abra-a em um pop-up.
Estilize a imagem e sobreponha #
Abrir o Estilo guia. O Imagem a seção controla a aparência da imagem antes e durante o hover, e é daí que realmente vem grande parte do efeito.
- Opacidade da imagem e opacidade do pairar: quão visível a imagem está em repouso e pairando.
- Filtro de imagem e filtro de imagem do Hover: desfoque, brilho e contraste para cada estado.
- Fronteira, Raio de Fronteira (Pro), Sombra de Caixa: o quadro em torno da imagem.
Na seção Imagem, separe Título e Descrição as seções tratam da cor e da tipografia do texto de sobreposição.
Casos de uso comum #
- Portfólios revelando o nome de um projeto e link no hover.
- Grades equipe mostrando um nome e uma função sobre cada foto.
- Telhas serviço com um título e legenda curta por imagem.
- Miniaturas do blog isso surge no título do post ao pairar.
- Galerias produtos emparelhamento de uma imagem com um nome e um botão.
Dicas para trabalhar com o widget Efeitos de Imagem Hover #
- Use imagens nítidas. A sobreposição escurece a imagem, de modo que uma foto ocupada pode dificultar a leitura do texto. Uma imagem mais calma com espaço no meio funciona melhor.
- Mantenha a legenda curta. Uma linha sob o título é melhor do que um parágrafo enfiado na sobreposição.
- Combine o efeito com o conteúdo. Fades sutis combinam com um portfólio; slides ousados combinam com uma promoção.
- Defina a tag de título certa. Use H2 ou H3 para títulos de galeria, não H1, a menos que seja o título principal da página.
- Teste no celular. Não há hover no toque, então verifique se a sobreposição ainda faz sentido quando alguém toca.
Assista ao tutorial em vídeo #
Prefere acompanhar na tela? o tutorial em vídeo abaixo percorre o elemento Image Hover Effects do início ao fim, mostrando como os efeitos, o texto de sobreposição e o estilo funcionam no editor Elementor.
Perguntas frequentes #
O que é o widget Efeitos de Imagem Hover em Master Addons?
É um widget Elementor que adiciona uma animação de hover CSS a uma imagem No hover revela um título, uma legenda e um link opcional, com o movimento vindo de um efeito predefinido nomeado Tudo é definido a partir do painel Elementor sem código.
Quantos efeitos de hover o widget inclui?
Trinta. Oito são gratuitos (Sadie, Lily, Roxy, Bubba, Romeo, Layla, Honey e Oscar) e os outros 22 vêm com Master Addons Pro. Cada um anima a imagem e sobrepõe o texto de uma maneira diferente.
Posso adicionar um link ou botão à imagem?
Sim. a opção Links ou Popup pode fazer toda a imagem um link na versão gratuita Com Pro pode abrir um popup em vez disso, mostrando uma imagem, texto ou um modelo Elementor salvo.
Posso mostrar um título e legenda no hover?
Sim. A seção Cabeçalho define o título e sua tag HTML, e o campo Descrição adiciona uma legenda abaixo dela Ambos aparecem como parte da animação hover, então a imagem permanece limpa até que alguém paire sobre ela.
Os efeitos de hover da imagem funcionam no celular?
O hover é uma interação de desktop, portanto, os dispositivos de toque não têm nenhum hover verdadeiro Muitos efeitos ainda mostram a sobreposição no tap, mas você deve testar em um telefone e manter o texto-chave visível ou acessível, especialmente se a imagem também for um link.
Embrulhando #
O Widget de efeitos de passagem de imagem transforma uma imagem estática em interativa: escolha um efeito, carregue a imagem, adicione um título e legenda e, em seguida, estilize a opacidade, os filtros e o texto. Para widgets relacionados, consulte o Widget de caixa de informações e o Widget flipbox, navegue por completo Widgets e extensões Master Addons, e verifique o página preços para o que cada plano inclui.
