如何叠加元素？

Question

我怎样才能用图像叠加一个div呢？我有一个div，它包含一个图像和另一个div，其中div在默认情况下具有0的不透明度，当它徘徊时它的不透明度为1。问题是我有我的形象在隐藏的区域下面。我想让我的div出现在我的图像中心，当我悬停，而不是在下面。

这是我的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

这是我的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;
}

Answer 1

为此，我建议使用CSS网格。

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