How can i superpose a div with an image? I´m having a div that contains an image and another div, where the div has opacity 0 by default and a opacity of 1 when it hovers. The thing is i have my image and below the hidden div. I want to make my div appear in the center of my image when i hover over and not below.

This is my 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

And this is my 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;
}