Estoy tratando de implementar una superposición en un elemento de imagen, con un botón dentro que te permite rotar la imagen 180 grados. Esto funciona bien hasta que rotas la imagen por primera vez, luego la superposición no volverá a aparecer o por alguna razón está detrás de la etiqueta de la imagen. Intenté configurar el índice z de la imagen en -999 pero eso no hizo nada. . Necesito la solución para trabajar en dispositivos móviles, por lo que trabajar con detectores de eventos onmouseover no era una opción para mí.

Código Sandbox aquí

Código:

 <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); }