Principais conclusões
- Os efeitos de passagem de imagem CSS no Elementor seguem duas etapas: adicionar um nome de classe ao widget Imagem em Avançado, Classes CSS e, em seguida, colar uma regra CSS direcionada a essa classe.
- Os cinco efeitos de pairar de imagem CSS neste guia são um zoom dentro do quadro, escala de cinza para colorir, um elevador com sombra, uma sobreposição escura e uma legenda que desliza para cima.
- Elementor Pro tem uma caixa CSS Personalizada na guia Avançado de cada widget, e sem Pro o mesmo CSS pode ir em Aparência, Personalizar, CSS Adicional.
- O widget Imagem da Elementor imprime sua legenda como uma legenda de figurino dentro de uma figura, que é o que torna possível uma legenda deslizante apenas com CSS.
- As alterações de escala de cinza para cor e opacidade não precisam de CSS no Elementor, porque a guia Estilo do widget Imagem já possui Filtros CSS e Opacidade em uma guia Hover.
Os efeitos de hover de imagem CSS funcionam no Elementor da mesma forma que funcionam em qualquer lugar: uma classe no elemento e uma regra com :hover. As únicas partes específicas do Elementor são onde você digita a classe e onde você cola o CSS Abaixo estão cinco efeitos que você pode copiar, cada um testado no Elementor 4.3 com o widget de imagem padrão.
Se preferir não tocar no código, a última seção mostra a rota sem código com o Widget de efeitos de passagem de imagem.
Índice
Como funcionam os efeitos de hover CSS no Elementor
Cada trecho abaixo segue o mesmo padrão Você dá ao widget Imagem uma classe, e o CSS muda a imagem dentro desse widget quando o ponteiro está sobre ele.
- Selecione o widget Imagem no Elementor.
- Abrir o Avançado tab e encontrar Aulas CSS.
- Digite o nome da classe sem ponto, por exemplo
hover-zoom. - Adicione o CSS correspondente ao seu site uma vez Qualquer imagem com essa classe, em seguida, obtém o efeito.
A classe cai no elemento externo do widget e a imagem é um img dentro dele, então as regras visam .hover-zoom img.
Onde adicionar o CSS
Você tem quatro lugares para colar CSS, dependendo do que está instalado.
| Lugar | Necessidades | Aplica-se a |
|---|---|---|
| Widget, avançado, CSS personalizado | Elementor Pro | Esse widget |
| Configurações do site, CSS personalizado | Elementor Pro | Todo o site |
| Aparência, Personalizar, CSS Adicional | Somente WordPress | Todo o site |
| Extensão CSS personalizada | Adições Mestres | O elemento ao qual você o adiciona |
Para as aulas que você planeja reutilizar, um lugar em todo o site é a melhor casa O Extensão CSS personalizada page explica como funciona a opção Master Addons.
5 efeitos de passagem de imagem CSS para copiar
Cada efeito tem um nome de classe, o CSS e uma captura de tela do resultado antes e durante o hover.
1. zoom dentro do quadro
A imagem aumenta enquanto sua caixa permanece do mesmo tamanho. Nome da classe: hover-zoom.
.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); }
2. escala de cinza para colorir
A imagem fica em preto e branco e fica colorida ao passar o mouse. Nome da classe: hover-color.
.hover-color img { filter: grayscale(100%); transition: filter 0.4s ease; }
.hover-color:hover img { filter: none; }
3. Levante com uma sombra
A imagem sobe alguns pixels e ganha uma sombra suave, como um cartão que está sendo pego Nome da classe: hover-lift.
.hover-lift img { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.hover-lift:hover img { transform: translateY(-6px); box-shadow: 0 18px 30px rgba(0, 0, 0, 0.18); }
4. sobreposição escura
Uma camada escura desaparece sobre a imagem Ele é construído com um pseudo-elemento, portanto, nenhuma marcação extra é necessária Nome da classe: hover-dim.
.hover-dim { position: relative; }
.hover-dim::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; }
.hover-dim:hover::after { opacity: 1; }
5. Legenda que desliza para cima
A legenda da própria imagem se esconde abaixo da borda inferior e desliza para cima no hover No widget Imagem, defina Legenda para Custom Caption e digite o texto primeiro Nome da classe: hover-caption.
.hover-caption figure { position: relative; overflow: hidden; margin: 0; }
.hover-caption figcaption { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 14px 18px; background: rgba(0, 0, 0, 0.6); color: #fff; transform: translateY(100%); transition: transform 0.35s ease; }
.hover-caption:hover figcaption { transform: translateY(0); }
Este depende da legenda estar lá Sem uma legenda, Elementor não imprime a figura e a figcaption, e a regra não tem nada para mover.
CSS ou as configurações de hover integradas?
Verifique os controles do próprio Elementor antes de escrever CSS, porque dois desses cinco efeitos existem como configurações A guia Estilo do widget Imagem tem uma guia Hover com Opacidade, Filtros CSS e Animação Hover.
| Efeito | Construído no Elementor? | Por que usar CSS |
|---|---|---|
| Escala de cinza para colorir | Sim, Filtros CSS, Saturação | Uma aula para muitas imagens |
| Zoom | Parcialmente. Crescer aumenta além do quadro. | Para manter o zoom dentro do quadro |
| Levante com sombra | Não | Elementor não tem configuração para isso |
| Sobreposição escura | Não, no widget Imagem | Necessário, a menos que você envolva a imagem em um contêiner |
| Legenda deslizante | Não | Necessário, a menos que você use um widget hover |
As configurações integradas são abordadas passo a passo como adicionar efeitos de hover de imagem no Elementor. A técnica geral está documentada em Página da MDN para a pseudo-classe : hover.
A rota sem código
CSS se adequa a efeitos simples na própria imagem Uma vez que você quer um título e uma descrição que anima sobre a imagem, o CSS cresce rapidamente, e você tem que mantê-lo em cada mudança de design.
O widget Efeitos de pairar imagem em Master Addons substitui isso por um dropdown Ele tem 30 efeitos, um título e descrição para cada imagem e controles de guia Estilo para cores e tipo.
Vejam-nos ao vivo. O Página do widget de efeitos de pairar de imagem tem oito cartas para pairar e uma tabela de todos os 30 efeitos.
Perguntas frequentes
Como adiciono efeitos de hover CSS a uma imagem no Elementor?
Selecione o widget Imagem, abra a guia Avançado e digite um nome de classe em Classes CSS Em seguida, adicione uma regra CSS para essa classe com: hover, por exemplo .hover-zoom: hover img {transform: scale (1.08); }. cole o CSS no CSS Personalizado do Elementor Pro ou em Aparência, Personalizar, CSS Adicional.
Onde coloco CSS personalizado no Elementor sem Pro?
Vá para Aparência, Personalizar, CSS adicional no painel do WordPress e cole-o lá O CSS carrega em cada página, para que qualquer widget com a classe correspondente o pegue Uma extensão CSS personalizada de um addon é outra opção.
Por que meu efeito de hover CSS não está funcionando no Elementor?
As causas usuais são um ponto digitado no campo Classes CSS, um nome de classe que não corresponde ao CSS ou uma folha de estilo em cache Digite a classe sem um ponto, compare a ortografia e, em seguida, limpe o plugin de cache e os arquivos do Elementor em Ferramentas.
Posso fazer uma imagem ampliar o hover sem transbordar?
Sim. defina o estouro para oculto no widget que carrega a classe e dimensione o img dentro dele O widget mantém seu tamanho e clipa a imagem ampliada O primeiro trecho neste guia faz isso.
Os efeitos de hover CSS funcionam em dispositivos móveis?
Os telefones não têm estado de pairar, então o efeito ou nunca mostra ou mostra depois de um toque e fica até que o visitante toque em outro lugar Trate os efeitos de pairar como decoração em telas pequenas e mantenha qualquer texto importante visível sem eles.
Pensamentos finais
Os efeitos de hover de imagem CSS no Elementor precisam de uma classe no widget Imagem e uma regra curta Os cinco aqui cobrem zoom, cor, elevação, sobreposição e uma legenda deslizante, e cada um pode ser ajustado alterando um ou dois valores.
Quando o efeito desejado inclui texto sobre a imagem, o Widget de efeitos de passagem de imagem leva você até lá sem manter o CSS.
Leitura relacionada
