CODEWITHSUNDEEP
javascriptjqueryhtmlcssdom
Christopher Karam
Christopher Karam

Reputation: 938

How to fade a background image in and out on hover with Javascript?

I'm looking to fade in and out my background image when hovering over a button on my website. I'm able to get the background image to display with the correct properties but I'm not able to figure out how to fade it in and out (to make the image feel smooth) and how to fade the all boxes other than the one thats currently hovered over. If there's any advice I can get it'd be greatly appreciated!

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

Site: 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 = '';
      }

  });

Upvotes: 0

Views: 720

Answers (1)

Scott Marcus
Scott Marcus

Reputation: 65853

You won't be able to fade a background image in and out separately from the element's content, but you can place the image in its own element that is behind all the other content in the element and then fade that element that contains the image:

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>

Upvotes: 1

Related Questions