🧊Cube d'animation

Installation

Créer une section en Largeur de contenu : Pleine largeur et Ecart des colonnes : Aucun écart.

Attribuer à la section global ID de CSS : “encart” comme ci-dessous .

Capture d’écran 2023-07-07 112112.png

Créer ensuite autant de colonne que nécessaire qui correspondent aux activités, chaque colonne étant un bloc animé.

Code source

jQuery(document).ready(function($) {

    $("#encart1").mouseover(function() {
        $("#encart").css("background-image", "url('/wp-content/uploads/2023/02/Saverdun3.jpg')");
        $("#encart").css("transition-duration", "1000ms");
        $("#encart").css("transition-delay", "150ms");
        $("#encart").css("transition-property", "background-image");
    });
    
    $("#encart1").mouseleave(function() {
        $("#encart").css("background-image", "url('/wp-content/uploads/2023/02/storage-boxes-for-storage.jpg')");
        $("#encart").css("transition-duration", "1000ms");
        $("#encart").css("transition-delay", "150ms");
        $("#encart").css("transition-property", "background-image");
    });
    
    $("#encart2").mouseover(function() {
        $("#encart").css("background-image", "url('/wp-content/uploads/2023/02/326629772_550492280373937_1880225093344665238_n.jpg')");
        $("#encart").css("transition-duration", "1000ms");
        $("#encart").css("transition-delay", "150ms");
        $("#encart").css("transition-property", "background-image");
    });
    
    $("#encart2").mouseleave(function() {
        $("#encart").css("background-image", "url('/wp-content/uploads/2023/02/storage-boxes-for-storage.jpg')");
        $("#encart").css("transition-duration", "1000ms");
        $("#encart").css("transition-delay", "150ms");
        $("#encart").css("transition-property", "background-image");
    });
    
    $("#encart3").mouseover(function() {
        $("#encart").css("background-image", "url('/wp-content/uploads/2023/02/20221128_150410.jpg')");
        $("#encart").css("transition-duration", "1000ms");
        $("#encart").css("transition-delay", "150ms");
        $("#encart").css("transition-property", "background-image");
    });
    
    $("#encart3").mouseleave(function() {
        $("#encart").css("background-image", "url('/wp-content/uploads/2023/02/storage-boxes-for-storage.jpg')");
        $("#encart").css("transition-duration", "1000ms");
        $("#encart").css("transition-delay", "150ms");
        $("#encart").css("transition-property", "background-image");
    });

});