Fondu d'une image d'arrière-plan pour une autre lors du survol d'un lien à l'aide des propriétés de transition jquery ou css

Question

Le titre peut être un peu déroutant. J'ai .main-container div contenant tout le contenu de ma page. Sur le lien stationnaire sur #cheffing J'ai besoin de changer l'image d'arrière-plan .main-container d'une image à l'autre et fondu entre les deux images.

Le problème est, pendant le fondu, je veux que mon contenu à l'intérieur .main-container soit toujours visible, seulement l'image d'arrière-plan soit affectée, pas le conteneur entier.

Je ne sais même pas comment aborder ce problème. Dois-je utiliser juste jQuery? CSS? classToggle()? fadeOut()? Je ne suis pas sûr ...

J'utilise jQuery. Désolé si cela n'a pas de sens. Si tu as besoin de plus, je serai là.

code Pen

https://codepen.io/JDSWebService/pen/NjmrRv

HTML

<div class=".main-container"> 
    Other Misc Page Content 
    <a href="#" id="cheffing">Cheffing</a> 
    Other Misc Page Content 
</div> 

CSS

.main-container { 
    height: 100vh; 
    background: url("../imgs/background.jpg"); 
    background-size: cover; 
    background-position: 0 0; 
    background-repeat: no-repeat; 
    transition: background 1s ease-out; 
} 

Answer 1

Vous ne pouvez pas animer un arrière-plan.

Voici an simple example.

Ainsi, une image positionnant élément dans l'élément que vous voulez avoir un arrière-plan comme absolute avec un bas z-index apportera derrière le reste du contenu.

Ensuite, l'utilisation de .hover() peut basculer entre deux images URL.

---

EDIT
Voici un second example en utilisant 2 images au lieu de 2 URL sur l'image 1 (pour éviter le le blanc entre).

HTML:

<div class=".main-container"> 
    <img id="background-1" src="firstImage.jpg"> 
    <img id="background-2" src="secondImage.jpg"> 
    content... 

CSS:

.main-container { 
    height: 100vh; 
    background-size: cover; 
    background-position: 0 0; 
    background-repeat: no-repeat; 
    transition: background 1s ease-out; 
} 
#background-1,#background-2{ 
    position:absolute; 
    z-index:-1; 
    width:100%; 
    height:500px; 
} 
#background-2{ 
    display:none; 
} 

jQuery:

var fadeOptions = { 
    duration:600, 
    easing:"linear" 
}; 

$("#cheffing").hover(function(){ 
    $("#background-1").fadeOut(fadeOptions); 
    $("#background-2").fadeIn(fadeOptions); 
}, 
function(){ 
    $("#background-2").fadeOut(fadeOptions); 
    $("#background-1").fadeIn(fadeOptions); 
});