I'm working on a school project creating an educational website about pumas. I want to have a set of buttons that are hidden behind an image, and when the user clicks on the image, the buttons should be revealed. However, I am facing an issue with the z-index property as it is not allowing the buttons to go behind the image.
#image {
width: 40%;
border-radius: 20px;
display: block;
margin: auto;
opacity: 1;
transition-duration: 0.4s;
cursor: pointer;
border: 4px solid black;
z-index: 10;
/* set higher z-index value */
}
#image:hover {
border: 4px solid white;
width: 42.5%;
}
#image.clicked {
opacity: 0;
transition-duration: 1s;
pointer-events: none;
}
.hidden {
display: none;
}
h3 {
text-align: center;
margin-bottom: 60px;
}
.image-container {
position: relative;
}
.buttons {
position: absolute;
margin: auto;
left: 50%;
transform: translateX(-50%) translateY(-50%);
justify-content: center;
gap: 10px;
z-index: 5;
/* set lower z-index value */
top: 50%;
}
button {
padding: 10px 20px;
border-radius: 20px;
border: none;
background-color: white;
color: black;
font-size: 16px;
cursor: pointer;
}
button:hover {
background-color: black;
color: white;
}<div class="image-container">
<div class="buttons">
<button>Button 1</button>
<button>Button 2</button>
<button>Button 3</button>
<button>Button 4</button>
</div>
<img src="https://cdn.britannica.com/20/93520-050-3E663489/Puma.jpg" id="image" onclick="this.classList.add('clicked');">
</div>I attempted to resolve the issue by adjusting the z-index values to separate the image and buttons further apart, but unfortunately, that did not provide a solution. I am currently unsure what steps to take next to address this problem.