Custom CSS in wordpress: on image hover, show a button

Question

I am trying to make a button with a certain css id visible when hovering an image image (also with a css id). I want to do so by adding custom CSS to my Elementor/Wordpress page. At first, I just have an image which shows a popup text next to it when hovering over it. This is the code I used at first without the button:

#img-b:hover {
    transform: scale(1.3);
    filter: drop-shadow(0 0.2rem 0.25rem rgba(0, 0, 0, 0.2));
    }

#img-b:hover:after {
    z-index: -1;
  background-color: #FFFFFF;
    content: "example text";
    word-wrap: break-word;
    font-size: 14px;
    text-align: left;
    padding: 15px 50px 15px 15px;
    border-radius: 10px 10px 10px 10px;
    position: absolute;
    top: 26px;
    bottom: 20px;
    right: 110px;
    left: -148px;
}

Now, I want to include a button (with css id #button-b), which appears in the text box beneath the text after hovering over the image. I customly made this button in Elementor, gave it an absolute position in the spot that I wanted it to reappear, and gave it a css id (#button-b). Also its z-index is a higher value (set this now to something like 5).

I tried all different things, like:

#button-b {
display: none;
}

#img-b:hover #button-b {
display: block;
}

Or for example changing the opacity of the button. The button would always disappear, but not reappear on hover. I think something is going wrong, in the sense that the button cannot be accessed from the #img-b:hover ? I also tried the same stuff, when deleting the code I made for the pop-up text box (so the #img-b:after part), and this did not work as well.

Does somebody know how to fix this? Thanks in advance!

Answer 1

I feel like the easiest way to do this is by using Elementor's html widget and build your hovering image with html code. Check this for example: How To Create Image Hover Overlay Effects - W3Schools

You could put then a <a> element under the text and style it with padding and border to make it look like a button.