Actualmente estoy tratando de crear una superposición en una imagen al pasar el mouse. Puedo mostrar un cuadro en la pantalla, pero no está colocado sobre la imagen.
destacado.js
const Featured = ({ images }) => { if (!images || !Array.isArray(images)) return null; return ( <section className={styles.featuredWrapper} id="work"> {images.map((image) => { return ( <div className={styles.wrap}> <GatsbyImage image={image.gatsbyImageData} alt="Link to the alt text" className={styles.featuredImg} /> <div className={styles.featuredOverlay}>Test</div> </div> ); })} </section> ); };destacado.module.css
.featuredImg { width: 100%; position: relative; } .featuredOverlay { position: absolute; background: black; opacity: 0.5; width: 100%; height: 100%; z-index: 1; }Cada explicación que veo gira en torno al uso de posiciones absolutas y relativas, lo que me hace pensar que mi problema es cómo represento mi componente. ¿Estoy usando las propiedades de posición en los elementos incorrectos?
import { useState } from "react"; import "./styles.css"; function Home() { const [showOverlay, setShowOverlay] = useState(false); return ( <div> <div className="main-container"> <div className="main-container__grid"> <img src="https://miro.medium.com/max/2000/1*3SjDVyFY09xZ7NYMO5kj0g.png" className="test" alt="Placeholder" onHover={() => setShowOverlay(true)} /> {showOverlay && <div className="targeting-box" />} </div> </div> </div> ); } export default Home;