O Image Overlay Addon For Elementor é um plugin/extensão visual complementar para WordPress e Elementor, desenvolvido sob medida para designers de interface, agências digitais, fotógrafos, e-commerces de moda, portfólios visuais e criadores de landing pages que precisam criar banners, cards informativos e vitrines gráficas interativas com efeitos de sobreposição de camadas (overlays dinâmicos, textos reveláveis e máscaras estilizadas) sobre imagens sem a necessidade de codificar posicionamentos absolutos e regras complexas de CSS.
Destaques:
- Composição Visual em Camadas Interativas (Layered Visuals): Permite sobrepor conteúdos ricos (títulos, subtítulos, parágrafos, ícones vetoriais, botões de ação e emblemas de destaque) sobre qualquer imagem estática, criando painéis promocionais e mostruários com profundidade estética e excelente legibilidade de texto.
- Integração Nativa com o Editor Visual do Elementor (Widget Dedicado): Adiciona um componente arrastar-e-soltar (drag-and-drop) diretamente ao painel lateral do construtor, possibilitando configurar textos, links, imagens e comportamentos de animação pelos controles nativos do Elementor sem encostar em linhas de código.
- Recursos Especializados de Animação e Revelação ao Passar o Cursor (Hover Effects):
- Múltiplas Direções de Entrada do Overlay: Configuração de transições suaves de entrada da camada sobreposta (deslizar a partir do topo, base, laterais, expansão circular pelo centro ou simples esmaecimento/fade);
- Efeitos Dinâmicos na Imagem de Fundo: Suporte a zoom suave (ken burns / scale up/down), desfoque gaussiano (blur filter), rotação sutil ou alternância de tons de cinza (grayscale) para cores vívidas no hover;
- Modos de Exibição Contínua ou Oculta: Opção de manter o conteúdo textual sempre visível sobre uma máscara semitransparente, ou mantê-lo totalmente oculto até a interação do mouse do visitante;
- Ações de Clique Flexíveis: Possibilidade de vincular o clique do cartão inteiro a um link externo/interno, disparar um modal popup ou abrir a imagem original em alta resolução em janela estilo lightbox.
- Controles Avançados de Estilização e Design System:
- Máscaras de Gradiente e Cores Sólidas: Ferramentas precisas para controlar opacidades independentes (no estado normal e no hover), aplicando gradientes lineares ou radiais que garantem o contraste perfeito entre fontes claras e fundos fotográficos complexos;
- Bordas, Arredondamento e Sombras de Caixa (Box Shadow): Ajustes finos de bordas sólidas ou duplas, cantos arredondados e sombras projetadas para dar sensação de relevo ao cartão;
- Tipografia e Cores Globais: Conexão direta com as variáveis globais de fontes e paletas de cores configuradas no tema do site através do Elementor.
- Performance Otimizada e Comportamento Responsivo:
- Adaptação Inteligente para Telas Sensíveis ao Toque: Controles específicos para definir o comportamento em smartphones e tablets (como exibir os textos permanentemente na tela touch ou acionar a sobreposição no primeiro toque e o link no segundo toque);
- Construção Baseada em CSS3 Puro: Utiliza aceleração por hardware e pseudo-elementos nativos para transições fluidas a 60 FPS, sem bibliotecas pesadas em JavaScript, garantindo estabilidade no carregamento e preservação das métricas de Core Web Vitals.