<p>J'essaie de résoudre un problème d'animation simple dans lequel une image d'arrière-plan apparaît et disparaît en survol. Même si j'ai défini l'image clé, le navigateur Web indique qu'elle n'est pas définie : </p> <pre class="brush:php;toolbar:false;">.elementor-section.elementor-element.core-range > .elementor-conteneur : survol .product-image::avant { animation : coreRangeBackground 0,3 s, facilité d'entrée et de sortie 0,3 s ; animation-fill-mode : avant ; } @keyframes coreRangeBackground { 100 % { image d'arrière-plan : url("./images/core-range-bg.svg" } } .elementor-section.elementor-element.phases-de-la-lune > .elementor-conteneur : survol .product-image::avant { nom de l'animation : phasesMoonBackground ; durée de l'animation : 0,3 s ; fonction de synchronisation d'animation : entrée et sortie faciles ; délai d'animation : 0,3 s ; animation-fill-mode : avant ; } @keyframes phasesMoonBackground { 100 % { image d'arrière-plan : url("./images/phases-of-the-moon-bg.svg" } }</pré> <p><strong>Modifier : impossible d'animer l'image d'arrière-plan, utilisez plutôt l'opacité</strong></p> <p>L'image apparaît en fondu avec un dégradé, mais lors de l'annulation du survol, elle passe immédiatement à aucune image au lieu de disparaître en fondu. </p> <pre class="brush:php;toolbar:false;">.elementor-section.elementor-element.product-card > .elementor-conteneur .product-image::avant { transition : tous les 0,3 s facilitent l'entrée et la sortie ; position : absolue ; largeur : 100 % ; hauteur : 100 % ; répétition d'arrière-plan : pas de répétition ; taille de l'arrière-plan : couverture ; haut : 0 ; gauche : 0 ; bloc de visualisation; contenu: ""; } .elementor-section.elementor-element.core-range > .elementor-conteneur : survol .product-image::avant { animation : facilité d'entrée et de sortie de productCardBackgroundHover 0,3 s ; animation-fill-mode : avant ; image d'arrière-plan : url("./images/core-range-bg.svg"); } .elementor-section.elementor-element.phases-de-la-lune > .elementor-conteneur : survol .product-image::avant { animation : facilité d'entrée et de sortie de productCardBackgroundHover 0,3 s ; animation-fill-mode : avant ; image d'arrière-plan : url("./images/phases-of-the-moon-bg.svg"); } @keyframes productCardBackgroundHover { 0% { opacité : 0 ; 100 % { opacité : 1 ; }</pré> <p><br /></p>

.elementor-section.elementor-element.product-card
   > .elementor-container
   .product-image::before {
   transition: opacity 0.3s ease-in-out;
   position: absolute;
   width: 100%;
   height: 100%;
   background-repeat: no-repeat;
   background-size: cover;
   top: 0;
   left: 0;
   display: block;
   content: "";
   opacity: 0;
}

.elementor-section.elementor-element.core-range
   > .elementor-container
   .product-image::before {
   background-image: url("./images/core-range-bg.svg");
}

.elementor-section.elementor-element.core-range
   > .elementor-container:hover
   .product-image::before, 
.elementor-section.elementor-element.phases-of-the-moon
   > .elementor-container:hover
   .product-image::before {
   opacity: 1;
}

.elementor-section.elementor-element.phases-of-the-moon
   > .elementor-container
   .product-image::before {
   background-image: url("./images/phases-of-the-moon-bg.svg");
}