Hide image on hover - SCSS-CodePudding

I'm trying to hide my image so that it reveals the one behind it, whenever I hover on the button. For some reason, I can't get it working - I feel like my code should work. I've tried doing display:none and block for the hover and even tried the z-index but I still can't figure it out. Any help is appreciated, thanks.

I currently have text hidden that reveals when I hover the button, so I'm not sure if that is affecting it. But i've done that is SCSS.

<figure class="figure">

              <img class="figure-image lazyload front"
                src="/image.png">

                <img class="figure-image lazyload back"
                src="/image2.png">


   <button class="figure-button" id="figure-button">REVEAL ANSWER</button>
    <figcaption class="figure-caption-test" id="reveal-text">HiddenText</figcaption>

            </figure>

My SCSS -

.figure-button:hover   .figure-caption-test {
      display: block;
    }


    .back {
      opacity: 1;
    }


    .figure-button:hover   .back {
      opacity: 0!important;
    }

JsFiddle - https://jsfiddle.net/2ukxfe47/1/

CodePudding user response：

You need to change the position of the button in the mark-up

<figure class="figure">
<button class="figure-button" id="figure-button">REVEAL ANSWER</button>
              <img class="figure-image lazyload front"
                src="/image.png">

                <img class="figure-image lazyload back"
                src="/image2.png">


   
    <figcaption class="figure-caption-test" id="reveal-text">HiddenText</figcaption>

            </figure>

As well as replace the selector with ~ (This selector will select all siblings after .figure-button that have the class .figure-caption-test)

.figure-button:hover ~ .figure-caption-test {
      display: block;
    }


    .back {
      opacity: 1;
    }


    .figure-button:hover ~ .back {
      opacity: 0!important;
    }

' ' is targeting the very next element you add after it. See more here : https://www.w3schools.com/cssref/css_selectors.asp