Im trying to implement an overlay on an image element, with a button inside that lets you rotate the image 180 degrees. This works fine until you rotate the image the first time, then the overlay will not show up again or is for some reason behind the image tag, i have tried setting the z-index of the image to -999 but that did not do anything. I need the solution to work on mobile to, so working with onmouseover event listeners wasnt an option for me.

Code Sandbox here

Code:

<div class="relative">
    <div class="absolute overlay">
       <button id="rotate">Click to Rotate this Image 180 Degrees</button>
    </div>
    <div>
      <img id="image-to-rotate" src="https://picsum.photos/200/300" />
   </div>
</div>

import "./styles.css";

document.getElementById("rotate").addEventListener("click", () => {
  document.getElementById("image-to-rotate").classList.toggle("rotate");
});

.relative {
  position: relative;
  height: 300px;
  width: 200px;
}

.absolute {
  color: white;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.6);
  height: 100%;
  width: 100%;
  /*invisible by default*/
  opacity: 0;
}

.absolute:hover,
.absolute:active {
  /*show on hover, also on activate to work on mobile*/
  opacity: 1;
}
.rotate {
  transform: rotate(180deg);
}