I have placed my button on the image, but I want it to sit on top of the image. However, the z-index: 1; property is not working as expected. I have tried all possible position attributes to see if it works, but there was no change. I also added z-index to all the CSS code below, but nothing seems to be working. I even searched the internet, including YouTube, and tried various methods, but none of them seem to solve the issue.
Below is my HTML code:
a .play {
background: steelblue;
border-radius: 50% / 10%;
color: #FFFFFF;
font-size: 2em;
height: 3em;
margin-top: -350px;
float: right;
margin-right: 10px;
margin-top: 25px;
padding: 0;
position: relative;
z-index: 1;
text-align: center;
text-indent: 0.1em;
transition: all 150ms ease-out;
width: 4em;
}
a .play:hover {
background: #ff0000;
}
a .play::before {
background: inherit;
border-radius: 5% / 50%;
bottom: 9%;
content: "";
left: -5%;
position: absolute;
right: -5%;
top: 9%;
}
a .play::after {
border-style: solid;
border-width: 1em 0 1em 1.732em;
border-color: transparent transparent transparent rgba(255, 255, 255, 0.75);
content: ' ';
font-size: 0.75em;
height: 0;
margin: -1em 0 0 -0.75em;
top: 50%;
position: absolute;
width: 0;
}<div id="index-gallery">
<div class="item">
<img src="img/after.jpg" alt="" width="300px" />
<p>My Caption here</p>
<a href="#">
<div class="play"></div>
</a>
</div>
<div class="item2">
<img src="img/after.jpg" alt="" width="300px" />
<p>My Caption here</p>
<a href="#">
<div class="play2"></div>
</a>
</div>
<div class="item3">
<img src="img/after.jpg" alt="" width="300px" />
<p>My Caption here</p>
<a href="#">
<div class="play3"></div>
</a>
</div>
<div class="item4">
<img src="img/after.jpg" alt="" width="300px" />
<p>My Caption here</p>
<a href="#">
<div class="play4"></div>
</a>
</div>
</div>