如何实现含图片的Div鼠标悬停时显示文本与投票数效果？

我看了你的代码，现在的问题主要是悬浮层的定位逻辑和父容器设置不对，导致悬停时悬浮层没法正确显示在图片上方。下面是具体的修复步骤和完整代码：

现有代码的核心问题 #

• .profil_zd_1 没设置 position: relative，绝对定位的 .middleImage 会相对于整个页面定位，而不是图片容器，位置完全偏离。
• 样式里有无效的 style.css:135.center 写法，应该把这个样式整合到正确的选择器中。
• 悬浮层没有背景样式，内容和图片重叠后可读性极差。

修复后的完整代码 #

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link href="assets/css/bootstrap.min.css" rel="stylesheet">
    <script src="assets/js/bootstrap.min.js"></script>
    <style>
        /* 给图片容器设置相对定位，作为悬浮层的定位锚点 */
        .profil_zd_1 {
            position: relative;
            display: inline-block; /* 让容器宽度自适应图片 */
        }

        .profil_zd_2 {
            border-radius: 25px;
            display: block; /* 消除图片底部默认的空隙 */
        }

        .center {
            margin: 0 auto;
        }

        .middleImage {
            transition: .5s ease;
            opacity: 0;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            text-align: center;
            /* 添加半透明背景和内边距，提升内容可读性 */
            background-color: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 10px 20px;
            border-radius: 8px;
        }

        .profil_zd_1:hover .profil_zd_2XXX {
            opacity: 0.5;
        }

        .profil_zd_1:hover .middleImage {
            opacity: 1;
        }

        /* 调整图标和文本的对齐方式，让排版更美观 */
        .text img {
            vertical-align: middle;
            margin-left: 8px;
        }
    </style>
</head>
<body>
    <div class="col-xs-12 col-sm-4 col-md-3 col-lg-3 profil_zd">
        <div class="profil_zd_1">
            <a href="pl/Zdjecie/12">
                <img src="assets/uploads/posts/t4G9Q23vJrXOfBkHEYx0MbsycWd6gwo5Vjla7UnLKApZS18qDINTimPhuReC.jpg" 
                     class="img-responsive center profil_zd_2 profil_zd_2XXX">
            </a>
            <div class="middleImage">
                <div class="post-info">254</div>
                <div class="text">name and surname
                    <img src="assets/images/ikon22.png" class="deleteMyAccount " id="">
                </div>
            </div>
        </div>
    </div>
</body>
</html>

关键修改点说明 #

1. 给 .profil_zd_1 添加 position: relative：这是绝对定位元素的核心锚点，确保 .middleImage 相对于图片容器居中显示，而不是整个页面。
2. 优化悬浮层样式：添加半透明背景色、白色文字和内边距，让悬浮层内容和下方图片区分开，可读性大大提升。
3. 调整图片与容器的显示逻辑：给图片加 display: block 消除底部空隙，容器用 inline-block 自适应图片宽度，避免容器过宽。
4. 修复无效样式写法：把 style.css:135.center 改成标准的选择器样式，整合到 <style> 标签内。
5. 优化图标排版：给图标添加垂直对齐和左边距，让它和文本的排版更协调。

这样修改后，鼠标悬停在图片上时，半透明的悬浮层就会正确居中显示在图片上方，包含投票数、姓名和图标，完全符合你预期的效果。

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