on image hover, show a button

  • Unknown's avatar
    roosxja · Member ·

    Hello,

    I am trying to make a button with a certain css id visible when hovering a different image (also with a css id). 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!

  • staff-mckluskey · Staff ·

    Hi there!

    What’s the address of the site you’re working on?

    Please note that these forums are for WordPress.com-hosted sites only. If your site is using the open-source WordPress.org software, we won’t be able to help you out, and you’ll want to post your message to these forums:

    https://wordpress.org/support/forums/.

  • The topic ‘on image hover, show a button’ is closed to new replies.