How to superpose elements?-CodePudding

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

CodePudding user response：

I would suggest using CSS grid for this

.postContainer{
    height:300px;
    width:300px;
    box-shadow: 0px 0px 2px 1.5px rgba(0, 0, 0, 0.2);    
    margin:10px;

    display: grid;
    place-items: center;
}
.postContainer > * { grid-area: 1/1/-1/-1 }

.postContainer img{
    height: 100%; width: 100%;
    object-fit: cover;
}

.postContainer .overlay{
    opacity: 0;
    z-index: 1;
}


.postContainer:hover img { opacity: .5}
.postContainer:hover .overlay{ opacity: 1 }

CodePudding user response：

You need to use z-index css property in .postContainer:hover