I hope someone can enlighten me on why this doesn’t work. So I have an introductory paragraph as a heading and inside some buttons, which, on hover, should each show a different image in a different position on the screen.

The problem is that the hover only works if the image would not be in front of the button when it is hovered, although the image obv isn’t in front of the button when you first hover it. But for some buttons I do want the image to be overlaying it a bit on hover.

In this image the branding button is hovered and can be hovered anywhere to work.

Here the image shows only up when the button is hovered on the visible part

I’m grateful for any help, thanks!

Here’s the code, really nothing complicated but I can’t figure it out.

HTML

   <div class="landing">
        <h1>Hi! I'm <button class="button__landing">Fynn</button><img class="first-img" src="img/fynn-img.jpeg">, a junior <button class="button__landing">communication</button><img class="second-img" src="img/substanz_landing.jpg" alt=""> designer in love with <button class="button__landing">screen design</button><img class="third-img" src="img/savo_landing.jpg" alt="">, <button class="button__landing">typography</button> and all things <button class="button__landing">branding</button><img class="fourth-img" src="img/rebooth_landing.png" alt="">.</h1>  
    </div>

CSS

.button__landing {
    padding: 10px 30px;
    border-radius: 18px;
    background-color: var(--green);
    text-transform: capitalize;
    vertical-align: 19px;
    cursor: pointer;
}

.landing img {
    display: none;
    visibility: hidden;
    opacity: 0;
    position: absolute;
}

.first-img {   
    top: 0;
    height: 500px;
}

.second-img {   
    bottom: 0;
    right: 0;
    height: 500px;
}

.third-img {   
    bottom: 0;
    height: 500px;
}

.fourth-img {   
    right: 0;
    height: 500px;
    top: 0;
}


.button__landing:hover + .first-img {
    position: absolute;
    visibility: visible;
    opacity: 1;
    display: block;
}

.button__landing:hover + .second-img {
    position: absolute;
    visibility: visible;
    display: block;
    opacity: 1;
}


.button__landing:hover + .third-img {
    position: absolute;
    visibility: visible;
    display: block;
    opacity: 1;
}


.button__landing:hover + .fourth-img {
    position: absolute;
    visibility: visible;
    display: block;
    opacity: 1;
}