How do I change the opacity of a slider when hovering over an image above?

Question

So I've got an image which plays audio, and changes image when clicked. I also have a volume slider beneath the image. My question is, how do I make the slider fade in and out when hovering over the image?

At the moment the slider over appears when hovering over the slider itself, not the image. I've tried setting the opacity to a variable and changing it through JavaScript but that didn't seem to do anything.

    function CoffeeChange() {
    if (Coffee.src == "https://static.wixstatic.com/media/38d0c2_f65cba752ac3460da7a56896d1195284~mv2.png") {
        Coffee.src = "https://static.wixstatic.com/media/38d0c2_37f01de3219a4804a3cb29f39e57b48c~mv2.png"; 
    } else {
        Coffee.src = "https://static.wixstatic.com/media/38d0c2_f65cba752ac3460da7a56896d1195284~mv2.png";
    }}

    document.getElementById("Coffee").onclick = function() {
        CoffeeChange()
        var audio = document.getElementById("CoffeeAudio");
        if (audio.paused) audio.play();
        else audio.pause();
    };

    volume.addEventListener("mousemove", coffeeVolume);

    function coffeeVolume(){
        document.getElementById("CoffeeAudio").volume = document.getElementById("volume").value / 100;
    }

    .slidecontainer {
      width: 100%;
    }

    .slider {
      -webkit-appearance: none;
      width: 100px;
      height: 15px;
      border-radius: 5px;  
      background: #d3d3d3;
      outline: none;
      -webkit-transition: .2s;
      transition: opacity .2s;
      position: relative;
      top: 130px;
      opacity:0;
    }

    .slider:hover {
      opacity: 1;
    }

    .slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 25px;
      height: 25px;
      border-radius: 50%;
      background: #4CAF50;
      cursor: pointer;
    }

    .slider::-moz-range-thumb {
      width: 25px;
      height: 25px;
      border-radius: 50%;
      background: #4CAF50;
      cursor: pointer;
    }

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <div class="slidecontainer">
      <input type="range" min="0" max="100" value="100" class="slider" id="volume">
    </div>
    <img id="Coffee" src="https://static.wixstatic.com/media/38d0c2_f65cba752ac3460da7a56896d1195284~mv2.png"
    height="100" width="100">


    <audio id="CoffeeAudio" loop>
       <source src="//music.wixstatic.com/preview/38d0c2_02a2ea74abbc49a29ae7bdfabd1091d0-128.mp3" type="audio/wav" />
    </audio>

I've added the entire code to make it clear how I've gone about doing what I have so far in case anything there might be preventing it from working.

Answer 1

Well, one thing you could do is wrap the <img> and .slidecontainer in a div and provide the mouse over to this wrapper like

   <section id="CoffeeAndSlider" onmouseover="showSlider('unhide')"onmouseout="showSlider('hide')">
            <div class="slidecontainer">
              <input type="range" min="0" max="100" value="100" class="slider" id="volume">
            </div>

            <img id="Coffee" src="https://static.wixstatic.com/media/38d0c2_f65cba752ac3460da7a56896d1195284~mv2.png"
            height="100" width="100">
     </section>

the showSlider Will look like

function showSlider(flag){
 if(flag==='unhide'){
    document.getElementById('volume').classList.add("unhide");
 }
 else if(flag==='unhide'){
 document.getElementById('volume').classList.remove("unhide");
 }
}

and finally add this to your css and remove the .slider:hover

.unhide{
    opacity: 1;
}

Answer 2

You need to invert the order of the <img> and .slidecontainer in code:

<img id="Coffee" src="https://static.wixstatic.com/media/38d0c2_f65cba752ac3460da7a56896d1195284~mv2.png" height="100" width="100">
<div class="slidecontainer">
  <input type="range" min="0" max="100" value="100" class="slider" id="volume">
</div>

...and use this

.slidecontainer {
  opacity: 0;
  transition: opacity .3s cubic-bezier(.4, 0, .2, 1); /* optional: fade transition */
}
.slidecontainer:hover, #Coffe:hover + .slidecontainer {
  opacity: 1;
  z-index: 1; /* optional: if img and the slider overlap, you want the slider on top */
}

Also, if .slidecontainer isn't yet positioned (has a set position value, other than static), you need to give it position:relative. This covers the case where they overlap.

Working example:

function CoffeeChange() {
  if (Coffee.src == "https://static.wixstatic.com/media/38d0c2_f65cba752ac3460da7a56896d1195284~mv2.png") {
    Coffee.src = "https://static.wixstatic.com/media/38d0c2_37f01de3219a4804a3cb29f39e57b48c~mv2.png";
  } else {
    Coffee.src = "https://static.wixstatic.com/media/38d0c2_f65cba752ac3460da7a56896d1195284~mv2.png";
  }
}

document.getElementById("Coffee").onclick = function() {
  CoffeeChange()
  var audio = document.getElementById("CoffeeAudio");
  if (audio.paused) audio.play();
  else audio.pause();
};

volume.addEventListener("mousemove", coffeeVolume);

function coffeeVolume() {
  document.getElementById("CoffeeAudio").volume = document.getElementById("volume").value / 100;
}

.slidecontainer {
  width: 100%;
}

.slider {
  -webkit-appearance: none;
  width: 100px;
  height: 15px;
  border-radius: 5px;
  background: #d3d3d3;
  outline: none;
  -webkit-transition: .2s;
  transition: opacity .2s;
  position: relative;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}

.slidecontainer {
  opacity: 0;
  transition: opacity .3s cubic-bezier(.4, 0, .2, 1);
}

.slidecontainer:hover,
#Coffee:hover+.slidecontainer {
  opacity: 1;
}

<img id="Coffee" src="https://static.wixstatic.com/media/38d0c2_f65cba752ac3460da7a56896d1195284~mv2.png" height="100" width="100">
<div class="slidecontainer">
  <input type="range" min="0" max="100" value="100" class="slider" id="volume">
</div>
<audio id="CoffeeAudio" loop>
   <source src="//music.wixstatic.com/preview/38d0c2_02a2ea74abbc49a29ae7bdfabd1091d0-128.mp3" type="audio/wav" />
</audio>