Javascriptで背景画像をフェードインとフェードアウトさせるにはどうすればいいですか？

Question

私のウェブサイトのボタンの上にマウスを置くと、背景画像がフェードインして出てきます。私は、適切なプロパティで表示するために背景画像を取得することができますが、私はどのようにフェードインとアウト（画像を滑らかに感じさせるために）を理解することはできませんし、それは現在、上に乗った。アドバイスがあれば、それを得ることができます。

Codepen：https://codepen.io/chriskaram/pen/ZXjjqj

サイト：https://mydietgoal.com/mydietgoal-features-and-plans

 document.addEventListener('DOMContentLoaded', function() { 

     var btn = document.getElementById('btn1'), 
      outerContainer = document.getElementsByClassName('Main-content')[0]; 
     var btnTwo = document.getElementById('btn2'), 
      outerContainer2 = document.getElementsByClassName('Main-content')[0]; 
     var btnThree = document.getElementById('btn3'), 
      outerContainer3 = document.getElementsByClassName('Main-content')[0]; 

     btn.addEventListener('mouseenter', hover); 
     btn.addEventListener('mouseleave', noHover); 
     btnTwo.addEventListener('mouseenter', hover2); 
     btnTwo.addEventListener('mouseleave', noHover2); 
     btnThree.addEventListener('mouseenter', hover3); 
     btnThree.addEventListener('mouseleave', noHover3); 

     function hover() { 
      outerContainer.style.backgroundImage = 'url(https://static1.squarespace.com/static/59a7820e2994ca11766093d3/t/59dbd720f5e2317170edb5bf/1507579681913/vegetables-fresh-healthy-food-my-diet-goal-hd.jpg)'; 
      outerContainer.style.backgroundAttachment = "fixed"; 
      outerContainer.style.backgroundPosition = "bottom"; 
      outerContainer.style.backgroundRepeat = "no-repeat"; 
      outerContainer.style.transition = "opacity .25s ease-in"; 
     } 

     function hover2() { 
      outerContainer2.style.backgroundImage = 'url(https://static1.squarespace.com/static/59a7820e2994ca11766093d3/t/59dbd7358fd4d2e11c887fc1/1507579706733/deadlift-workout-compound-work-hard-my-diet-goal-hd.jpg)'; 
      outerContainer.style.backgroundAttachment = "fixed"; 
      outerContainer.style.backgroundPosition = "bottom"; 
      outerContainer.style.backgroundRepeat = "no-repeat"; 
      outerContainer.style.transition = "opacity .25s ease-in"; 
     } 

     function hover3() { 
      outerContainer3.style.backgroundImage = 'url(https://static1.squarespace.com/static/59a7820e2994ca11766093d3/t/59dbd7514c0dbffb014a14c0/1507579730115/strong-powerful-motivation-healthy-body-my-diet-goal-hd.jpg)'; 
      outerContainer.style.backgroundAttachment = "fixed"; 
      outerContainer.style.backgroundPosition = "bottom"; 
      outerContainer.style.backgroundRepeat = "no-repeat"; 
      outerContainer.style.transition = "opacity .25s ease-in"; 
     } 

     function noHover() { 
      outerContainer.style.backgroundImage = ''; 
     } 

     function noHover2() { 
      outerContainer2.style.backgroundImage = ''; 
     } 

     function noHover3() { 
      outerContainer3.style.backgroundImage = ''; 
     } 

    }); 

Answer 1

あなたは要素の内容とは別にinとout背景画像をフェードすることはできませんが、あなたは、独自に画像を配置することができます要素内の他のすべてのコンテンツの後ろにある要素を消してから、画像を含むその要素を消してください。

var button = document.querySelector(".button"); 
 
var back = document.getElementById("backImg"); 
 

 
// Set up event handlers to change the opacity of the 
 
// image container when mousing in and out: 
 
button.addEventListener("mouseover", function(){ 
 
    back.style.opacity = 0; 
 
}); 
 

 
button.addEventListener("mouseout", function(){ 
 
    back.style.opacity = 1; 
 
});

.main { 
 
    text-align:center; 
 
    font-size:3em; 
 
    font-weight:bold; 
 
    color:#ff0; 
 
    
 
} 
 

 
#backImg { 
 
    position:absolute; /* Allow the image container to be placed into its own layer */ 
 
    z-index:-1;  /* Make sure that container is behind other content */ 
 
    transition:all 1s; /* Configure all property changes to transition over 1 second */ 
 
}

<div class="main"> 
 
    <div id="backImg"> 
 
    <img src="http://www.planwallpaper.com/static/images/23-3d-beach-sand-wallpaper.jpg"> 
 
    </div> 
 
    <button class="button">Hover over me!</button> 
 
</div>