Elementor: Como alterar uma imagem ao passar o mouse sobre o texto

Deseja alterar uma imagem ao passar o mouse sobre um texto com o página Builder Elementor ? Neste novo tutorial, mostraremos como fazê-lo.

Se você não tem ideia do que queremos falar hoje, convidamos você a assistir ao vídeo a seguir:

Então vamos voltar ao porquê de estarmos aqui.

Descubra também o nosso guia em:  Como criar um cartão de efeito de um portfólio com Elementor

Para concluir este tutorial, você precisará a versão Pro do Elementor, porque usaremos o código CSS personalizado que é compatível apenas com esta versão doElementor.

Vamos criar uma seção com 2 colunas, então no painel lateral, vamos definir o hauteur defende Altura Mínimae, em seguida, Altura mínima vamos clicar em VH e defina o controle deslizante para 100.

Na aba Style vamos selecioná-lo Tipo de plano de fundo en cliquant clássico, em seguida, modifique o couleur defende# F9F9F9

Na aba avançado, modifique todos os Margens internas defende 25

Agora vamos alterar a largura da coluna para 40% para a coluna da esquerda e 60% para a coluna direita.

Na coluna da esquerda, vamos soltar um Editor de texto Widget, cole um Texto nele e modifique o Tamanho do título texto em Título 3.

Na aba avançado, digite como Margens Internas 10-25-10-30 respectivamente para o margens internas superior, direita, inferior e esquerda

Na secção fundo aba avançado, Clique em VISÃO GLOBAL, em seguida, selecione o tipo de plano de fundo defende clássico, vamos inseri-lo cor #DFF5FF et Duração da transição defende 0.5.

Se passarmos o mouse sobre o texto, teremos a oportunidade de descobrir uma magnífica cor de fundo ao passar o mouse.

Agora vamos para a seção fronteiras, e clique em VISÃO GLOBAL, em seguida, selecione Continuar para tipo de borda et vamos desativar o link entre border agarrar 4 para o borda esquerda. Vamos selecionar a cor #002FA7 e adicione uma duração de transição para 0.5

Se passarmos o mouse sobre nossa caixa de texto mais uma vez, veremos uma animação mais proeminente com uma borda à esquerda.

Na secção fronteira, vamos voltar para a guia NORMAL, vamos selecionar o tipo de borda em Continuar, vamos desligar a ligação entre as bordas, pegue 4 para a borda esquerda e torná-la muito transparente.

Se passarmos o mouse sobre o texto mais uma vez, veremos uma transição muito suave.

Leia também: Como exibir texto acima de uma imagem com Elementor

Vamos duplicar este texto duas vezes e alterar os textos de cada conteúdo assim.

Na coluna da direita, arraste um Widget de imagem, e insira uma imagem da nossa biblioteca.

Vamos criar algum espaço em torno desta imagem indo para Guia Avançado da coluna e digite 10 – 10 – 10 – 50 para todas as margens internas de Superior, Direita, Inferior e Esquerda.

Vamos selecionar a imagem e na aba avançado deste último, vamos para a seção Efeitos de movimento depois Animação de entrada, selecione Fade In

Vamos para a seção avançado da guia Avançado e adicione alguns nomes de classe no campo Classes CSS. Então vamos pegar tudo img img-1

Vamos duplicar nossa imagem 2 vezes.

Vamos selecionar a segunda imagem e mudar img-1 para img-2, então mude a imagem para uma nova imagem.

Veja também: Como criar uma galeria de imagens com Elementor

Para a terceira imagem vamos apenas mudar img-1 para img-3, então mudar a imagem para uma nova imagem.

Vamos selecionar nossa seção e ir para sua guia avançado. Na seção CSS customizado, copie e cole o seguinte trecho de código:

selector .all-img{
    display: none;
}
selector .img-1{
    display: block;
}

(Se você não tem esta seção, então você não tem a versão Pro, se você quiser continuar, você precisa atualizar sua versão).

Vamos selecionar nosso primeiro editor de texto e ir para a guia Avançado e o Seção de atributos. No campo Atributos, copie e cole o seguinte trecho de código:

data-showme|img-1

Faça isso para outros editores de texto enquanto altera img-1 para img-2 ou para img-3

Agora vamos adicionar um widget HTML à nossa página. Copie e cole o seguinte script:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
var $ = jQuery
$(document).ready(function(){
    $('[data-showme]').hover( function(){
        event.preventDefault();
        var showme = $(this).attr('data-showme')
        
        $('.all-img').hide()
        $('.' + showme).show()
        
    })
})
</script>

Agora salve ou atualize sua página e visualize-a.

Pronto, você acabou de fazer essa tarefa facilmente.

Obtenha o Elementor Pro agora!

Conclusão

Aí está ! É isso para este artigo que mostra como alterar uma imagem ao passar o mouse sobre um texto. Se você tiver alguma dúvida sobre como chegar lá, avise-nos dentro Comentários.

No entanto, você também pode consultar nossos recursos, se você precisar de mais elementos para realizar seus projetos de criação de sites da Internet, consultando nosso guia no site Criação de blog WordPress ou aquele em Divi: o melhor tema WordPress de todos os tempos.

Mas enquanto isso, compartilhe este artigo em suas diferentes redes sociais.

...