Dans ce tutoriel, je vais vous montrer comment créer un effet de fondu très simple sur l’image de fond d’un conteneur ou d’une section d’Elementor. Cette méthode vous permet de conserver l’opacité de tous les conteneurs à l’intérieur du conteneur parent. L’effet désiré ressemblera à l’image ci-dessous.
Passez la souris sur cette boîte pour voir l'arrière-plan s'afficher en fondu.
Ce texte, ou tout autre contenu dans le conteneur, ne s’effacera pas lorsque l’arrière-plan s’estompera. Elle ne sera en aucun cas affectée.
Comment faire avec les conteneurs en 2024
Je vous montrerai d’abord comment le faire avec des conteneurs (ce qui est maintenant le cas par défaut dans 2024), mais je vous montrerai aussi comment y parvenir en utilisant des sections, ce que de nombreux sites construits avant la dernière mise à jour auront.
L’étape 1 consiste à créer un nouveau conteneur et à lui ajouter une image de fond. Aller à Style -> Superposition d’arrière-plan et ajoutez votre image. Ne vous contentez pas d’ajouter une image d’arrière-plan au conteneur, assurez-vous que vous ajoutez l’image à l’aide de la fonction “Background overlay”, sinon cela ne fonctionnera pas.
Cliquez ensuite sur “Avancé” et ajoutez une classe à ce conteneur. Aller à Avancé -> Classes CSS et insérer un nom de classe. Il peut s’agir de n’importe quoi, mais pour les besoins de ce tutoriel, je l’appellerai“my-fade-container” (voir l’image ci-dessous).
Lorsque vous utilisez le “background overlay” dans Elementor, il ajoute l’image en utilisant la pseudo-classe CSS ‘::before‘. C’est ce que nous allons manipuler lorsque l’utilisateur survole le conteneur.
.my-fade-container::before{
opacity:0;
transition:opacity 0.7s;
}
Dans le code ci-dessus, nous ciblons l’élément ::before qu’Elementor ajoute lorsqu’un arrière-plan est ajouté à un conteneur. L’opacité est de 0, de sorte qu’il est initialement caché. Nous ajoutons une durée de transition de 0,7 seconde, afin que le fondu ne soit pas instantané (vous pouvez modifier cette durée à votre guise).
.my-fade-container:hover::before{
opacity:0.5;
}
Le prochain élément de code CSS que nous ajoutons est illustré ci-dessus. Cela permet d’afficher l’arrière-plan lorsque l’utilisateur survole notre conteneur en modifiant l’opacité à un niveau supérieur à 0 (dans ce cas, j’ai choisi 0,5 – donc à moitié transparent).
Vous remarquerez peut-être qu’il y a encore un peu d’espace entre le contenu interne de votre conteneur et l’image d’arrière-plan. C’est parce qu’Elementor ajoute un autre élément avec une classe “e-conn-inner”. Dans le prochain morceau de code, nous ciblerons cet élément, en faisant en sorte que l’espacement et la marge soient de 0.
.my-fade-container .e-con-inner{
padding:0;
margin:0;
}
Et c’est à peu près tout ! Pour faire disparaître une image au lieu de la faire apparaître en fondu, il suffit de commencer avec une opacité supérieure à 0, et de la ramener à 0 au survol de l’image.
Dans l’exemple ci-dessus, j’ai également ajouté une bordure et un peu de rembourrage au conteneur, ainsi que la règle “cursor:pointer” pour le survol du conteneur, mais pour l’essentiel, vous n’avez besoin que des règles CSS ci-dessus pour que l’effet fonctionne.
Comment cela se passe-t-il avec les sections ?
Si vous avez créé votre site avant la dernière mise à jour d’Elementor, il se peut que votre site utilise des sections au lieu de conteneurs, le code ci-dessus ne fonctionnera donc pas. Mais n’ayez crainte, le code pour les sections est tout aussi simple.
L’étape 1 consiste à créer une nouvelle section et à lui ajouter une image de fond. Aller à Style -> Superposition d’arrière-plan et ajoutez votre image. Ne vous contentez pas d’ajouter une image d’arrière-plan à la section, assurez-vous que vous ajoutez l’image à l’aide de l’option “Incrustation d’arrière-plan”, sinon cela ne fonctionnera pas.
Cliquez ensuite sur “Avancé” et ajoutez une classe à cette section. Aller à Avancé -> Classes CSS et insérer un nom de classe. Il peut s’agir de n’importe quoi, mais pour les besoins de ce tutoriel, je l’appellerai“ma section de fondu” (voir l’image ci-dessous).
Lorsque vous utilisez le“background overlay” pour les sections Elementor, il ajoute une nouvelle div avec la classe“elementor-background-overlay” dans la section, puis tous les conteneurs que vous avez dans la section sont ajoutés comme des divs séparées au même niveau que la div background-overlay (c’est-à-dire pas des enfants, mais des frères et sœurs). C’est ce que nous allons manipuler lorsque l’utilisateur survole le conteneur.
section.my-fade-section .elementor-background-overlay{
opacity:0 !important;
transition:opacity 0.7s;
}
Dans le code ci-dessus, nous ciblons l’élément .my-fade-section qu’Elementor ajoute lorsqu’un arrière-plan est ajouté à une section. L’opacité est de 0, de sorte qu’il est initialement caché. Nous ajoutons une durée de transition de 0,7 seconde, afin que le fondu ne soit pas instantané (vous pouvez modifier cette durée à votre guise).
section.my-fade-section:hover .elementor-background-overlay{
opacity:0.5 !important;
}
Le prochain élément de code CSS que nous ajoutons est illustré ci-dessus. Cela permettra d’afficher l’arrière-plan lorsque l’utilisateur survolera notre section en modifiant l’opacité de la div de recouvrement à un niveau supérieur à 0 (le paramètre d’opacité le plus élevé est 1). Dans ce cas, je le modifie pour qu’il soit de 0,5, c’est-à-dire “à moitié” transparent.
Et c’est à peu près tout ! Pour faire disparaître une image au lieu de la faire apparaître en fondu, il suffit de commencer avec une opacité supérieure à 0, et de la ramener à 0 au survol de l’image.
Dans l’exemple ci-dessus, j’ai ajouté une bordure pour le rendre plus visible, un peu de rembourrage au conteneur ainsi que la règle “cursor:pointer” pour le survol du conteneur, mais pour l’essentiel, vous n’avez besoin que des règles CSS ci-dessus pour que l’effet fonctionne.
Dites-moi si cela a fonctionné pour vous dans les commentaires ci-dessous.
