¿Cómo puedo superponer un div con una imagen? Tengo un div que contiene una imagen y otro div, donde el div tiene una opacidad de 0 por defecto y una opacidad de 1 cuando se desplaza. La cosa es que tengo mi imagen y debajo del div oculto. Quiero que mi div aparezca en el centro de mi imagen cuando pase el mouse por encima y no por debajo.

Este es mi Post.js:

 const Post = () => { return ( <div> <div className="postContainer"> <img src={image} alt="profile"/> <div className="overlay"> <div className="content"> <FontAwesomeIcon icon={faHeart} /> </div> </div> </div> </div> ) } export default Post

Y este es mi Post.css

 .postContainer{ height:300px; width:300px; box-shadow: 0px 0px 2px 1.5px rgba(0, 0, 0, 0.2); margin:10px; } .postContainer:hover{ opacity:.5; } .postContainer img{ /* max-width: 100%; max-height: 100%; */ height:300px; width:300px; } .overlay{ opacity: 0; } .postContainer:hover .overlay{ opacity:1; }