Efeito Hover Para Elementor Free Que Troca Imagem De Fundo

Efeito Hover Para Elementor Free Que Troca Imagem De Fundo [SEM PLUGINS ADICIONAIS]

Neste vídeo, vamos aprender a fazer uma seção com containers que muda a imagem de fundo quando passar o mouse sob um card de produto ou serviço, sem o auxílio de plugins adicionais e sem Elementor Pro.

Código CSS e JavaScript apresentados no vídeo

HTML

<style>
	.container-pai {
    --text-position: -500px;
    --heading-position: -50px;
    --button-position: 0px;
}
.container-pai, .container-pai .container-filho p, .container-pai .container-filho a, .container-pai .container-filho h2 {
    transition: .5s all ease-in-out;
}
.container-pai .container-filho p, .container-pai .container-filho a {
    position: relative;
    bottom: var(--text-position);
}
.container-pai .container-filho a {
    transition: 0.5s all linear;
    position: relative;
    top: 500px;
}
.container-pai .container-filho:hover p, .container-pai .container-filho:hover a {
    bottom: 0;
}
.container-pai .container-filho:hover a {
    top: var(--button-position);
}
.container-pai .container-filho h2 {
    position: relative;
    bottom: var(--heading-position);
}
.container-pai .container-filho:hover h2 {
    bottom: 0px;
}
</style>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
var $ = jQuery;
var card1 = "url(http://url-da-imagem.jpg)";
var card2 = "url(http://url-da-imagem.jpg)";

    $(document).ready(function() {
        
    $('#card1').hover(function() {
        $('#container-pai-id').css("background-image", card1)
    }, function() {
        $('#container-pai-id').css("background-image", "")
    });
    
    $('#card2').hover(function() {
        $('#container-pai-id').css("background-image", card2)
    }, function() {
        $('#container-pai-id').css("background-image", "")
    });
    
    });
</script>

HTML