Todos sabemos como a personalização ilimitada fica com Construtor de sites Elementor. Com essa personalização, podemos melhorar a experiência do usuário e ser criativos no que criamos.
Logo swap no efeito Hover é quando o usuário coloca seu cursor no logotipo colocado em seu site, ele altera automaticamente seus detalhes, ou seja, cor, forma ou contorno. Neste tutorial, vamos entender como criar uma troca de logotipo no efeito hover com Elementor.
Como criar troca de logotipo no efeito hover usando elementor
Você já sabe qual é o efeito e tem ideias em sua mente sobre o que você quer criar, vamos seguir em frente e ver como.
Para começar, adicione uma seção interna para os widgets.
Create Amazing Websites
Com o melhor criador de páginas gratuito Elementor
Comece agora
Em seguida, você precisa adicionar uma coluna em sua seção inicialmente criada. Para este tutorial, vamos com a estrutura de duas colunas.
Em seguida, arraste e solte o widget de imagem para a coluna que você criou.
Para que o efeito funcione, serão necessárias duas fotos. Um a ser mostrado normalmente, enquanto o outro a ser exibido quando o usuário coloca seu cursor.
Você pode usar duas variações do mesmo logotipo ou usar duas imagens totalmente diferentes, as possibilidades são ilimitadas.
Após a seleção de imagens, no campo CSS personalizado cole o seguinte código CSS para fazer a troca de logotipo no efeito hover funcionar.
selector img:hover{
content: url('https://wpbuilt.co/wp-content/uploads/2020/04/invision-logo-hover-new.png');
opacity: .50;
transition-duration: 3s;
}E pronto! Publique sua página para visualizar e veja como o efeito fica no seu site. Volte para fazer qualquer mudança se quiser.
É assim que você pode criar o efeito Logo Swap On Hover com Elementor. Não deixe de se juntar a nós em nossos Facebook e Gorjeio para ficar atualizado sobre nossos posts.
