如何实现Div与Image叠加悬浮？使Div在Image上方居中显示

我需要让一个div和图片叠加，容器内包含图片和div，div默认opacity为0，鼠标悬浮容器时opacity变为1。但当前div位于图片下方，希望悬浮时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;
}

修改后的解决方案 #

只需调整CSS代码即可实现需求，Post.js无需改动：

.postContainer{
    height:300px;
    width:300px;
    box-shadow: 0px 0px 2px 1.5px rgba(0, 0, 0, 0.2);    
    margin:10px;
    position: relative; /* 设置为相对定位，作为内部绝对定位元素的参考 */
}

.postContainer:hover img{ /* 仅让图片变暗，不影响 overlay */
    opacity:.5;
}

.postContainer img{
    height:300px;
    width:300px;
    display: block; /* 消除图片底部默认空白间隙 */
}

.overlay{
    opacity: 0;
    position: absolute; /* 绝对定位，覆盖在图片上方 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex; /* Flex 布局实现内部元素居中 */
    justify-content: center;
    align-items: center;
    transition: opacity 0.3s ease; /* 添加过渡动画，提升交互体验 */
}

.postContainer:hover .overlay{
    opacity:1;
}

.content{
    font-size: 3rem; /* 调整图标大小，增强视觉效果 */
    color: white; /* 设置图标颜色，在半透明图片上更清晰 */
}

关键修改说明 #

• position: relative：给容器添加相对定位，确保内部的绝对定位元素以容器为基准，而非整个页面。
• 调整hover目标：将.postContainer:hover改为.postContainer:hover img，避免overlay也被设置为半透明。
• 绝对定位+Flex居中：通过position: absolute让overlay覆盖整个容器，再用Flex布局让心形图标完美居中在图片上。
• 可选优化：添加过渡动画和图标样式调整，让交互更流畅，视觉效果更好。

内容的提问来源于stack exchange，提问作者mateo ghidini