为图片集实现鼠标悬停文字覆盖层效果求助

安全阿岳

2026-8-9

实现图片悬停半透明+文字覆盖层的解决方案

我正在为妹妹制作一个练习用网站，想要实现鼠标悬停图片时，图片变为半透明并显示文字覆盖层的效果，但尝试了一整天，甚至把每张图片放入单独的div和容器后，图片出现堆叠，始终没达成目标。以下是我的原HTML和CSS代码：

原HTML代码

<!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Emma Allerd Website</title>

    <!-- Bootstrap CDN  -->

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous">
    </script>
    <link rel="stylesheet" href="styles.css">

    <!-- Font Awesome CDN  -->

    <script src="https://kit.fontawesome.com/661ef34abd.js" crossorigin="anonymous"></script>

    <!-- Google Fonts  -->

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Cedarville+Cursive&family=Cutive+Mono&display=swap"
        rel="stylesheet">

</head>

<body>
    <!-- Nav Bar -->

    <nav id="navbar" class="navbar fixed-top navbar-expand-lg navbar-light bg-light p-4">
        <a class="navbar-brand" href="#">
            <h1 class="logo-margin logo-text">Emma Allard</h1>
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">

            <ul class="navbar-nav ms-auto navbar-margin navbar-text">
                <li class="nav-item">
                    <a class="nav-link link-text" href="#about-address">About</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                        data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Projects
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <a class="dropdown-item" href="#championnet">Championnet</a>
                        <a class="dropdown-item" href="#project2">Project Name 2</a>
                        <a class="dropdown-item" href="#project3">Project Name 3</a>
                    </div>
                </li>
                <li class="nav-item">
                    <a class="nav-link link-text" href="https://www.instagram.com/atelier.m_co" target="_blank">Instagram</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link link-text" href="#contact-address">Contact</a>
                </li>

            </ul>
        </div>
    </nav>


    <!-- Portfolio Pictures  -->

    <hr id="championnet">

    <section>
        <div class="container port-pictures">
            <div class="row row-padding">
                <div class="col-lg">
                    <img class="empic-tall1" src="Emma_Allerd_Images/empic7.jpg" alt="tc-logo">
                    <img class="empic-short1" src="Emma_Allerd_Images/emmapic2.jpg" alt="tc-logo">
                    <img class="empic-tall1" src="Emma_Allerd_Images/emmapic3.jpg" alt="tc-logo">
                </div>
            </div>
            <div class="row row-padding">
                <div class="col-lg">
                    <img class="empic-short2" src="Emma_Allerd_Images/emmapic4.jpg" alt="tc-logo">
                    <img class="empic-tall2" src="Emma_Allerd_Images/emmapic5.jpg" alt="tc-logo">
                    <img class="empic-short2" src="Emma_Allerd_Images/emmapic6.jpg" alt="tc-logo">

                </div>
            </div>
            <div class="row row-padding">
                <div class="col-lg">
                    <img class="empic-tall1" src="Emma_Allerd_Images/emmapic1.jpg" alt="tc-logo">
                    <img class="empic-short1" src="Emma_Allerd_Images/emmapic2.jpg" alt="tc-logo">
                    <img class="empic-tall1" src="Emma_Allerd_Images/emmapic3.jpg" alt="tc-logo">
                </div>
            </div>
            
        </div>
    </section>
</body>
</html>

原CSS代码

.port-pictures{
    margin-top: 10rem;
    text-align: center ;
}

.navbar-margin{
    margin-right: 12rem;
}

.logo-margin{
    margin-left: 12.5rem;
}

.empic-tall1{
    height: 375px;
    width: 321px;
}
.empic-tall1a{
    height: 350px;
    width: 350px;
}

.empic-short1{
    height: 375px;
    width: 446px;
}
.empic-tall2{
    height: 332px;
    width: 279px;

}
.empic-short2{
    height: 332px;
    width: 403px;
}

.row-padding{
    padding-bottom: .3rem;
}

.navbar-text{
    font-family: 'Cutive Mono', monospace;
    font-size: 1.2rem;
    
}
.logo-text{
    color: #000281;
    font-family: 'Cedarville Cursive', cursive;
    padding-top: 10px;
}

hr{
    color: #fff;
}

修改后的实现方案

核心思路

给每张图片套一个相对定位的容器，作为图片和文字覆盖层的父容器
文字覆盖层设置为绝对定位，覆盖在图片上方，默认隐藏
利用:hover伪类，在鼠标悬停容器时，降低图片透明度，同时显示文字覆盖层

修改后的HTML代码（仅替换Portfolio Pictures部分）

<section>
    <div class="container port-pictures">
        <div class="row row-padding">
            <div class="col-lg d-flex gap-2 justify-content-center">
                <!-- 每张图片都放入独立容器 -->
                <div class="image-container">
                    <img class="empic-tall1" src="Emma_Allerd_Images/empic7.jpg" alt="作品展示">
                    <div class="image-overlay">Championnet 作品1</div>
                </div>
                <div class="image-container">
                    <img class="empic-short1" src="Emma_Allerd_Images/emmapic2.jpg" alt="作品展示">
                    <div class="image-overlay">Championnet 作品2</div>
                </div>
                <div class="image-container">
                    <img class="empic-tall1" src="Emma_Allerd_Images/emmapic3.jpg" alt="作品展示">
                    <div class="image-overlay">Championnet 作品3</div>
                </div>
            </div>
        </div>
        <div class="row row-padding">
            <div class="col-lg d-flex gap-2 justify-content-center">
                <div class="image-container">
                    <img class="empic-short2" src="Emma_Allerd_Images/emmapic4.jpg" alt="作品展示">
                    <div class="image-overlay">作品4</div>
                </div>
                <div class="image-container">
                    <img class="empic-tall2" src="Emma_Allerd_Images/emmapic5.jpg" alt="作品展示">
                    <div class="image-overlay">作品5</div>
                </div>
                <div class="image-container">
                    <img class="empic-short2" src="Emma_Allerd_Images/emmapic6.jpg" alt="作品展示">
                    <div class="image-overlay">作品6</div>
                </div>
            </div>
        </div>
        <div class="row row-padding">
            <div class="col-lg d-flex gap-2 justify-content-center">
                <div class="image-container">
                    <img class="empic-tall1" src="Emma_Allerd_Images/emmapic1.jpg" alt="作品展示">
                    <div class="image-overlay">作品7</div>
                </div>
                <div class="image-container">
                    <img class="empic-short1" src="Emma_Allerd_Images/emmapic2.jpg" alt="作品展示">
                    <div class="image-overlay">作品8</div>
                </div>
                <div class="image-container">
                    <img class="empic-tall1" src="Emma_Allerd_Images/emmapic3.jpg" alt="作品展示">
                    <div class="image-overlay">作品9</div>
                </div>
            </div>
        </div>
    </div>
</section>

修改后的CSS代码

.port-pictures{
    margin-top: 10rem;
    text-align: center ;
}

.navbar-margin{
    margin-right: 12rem;
}

.logo-margin{
    margin-left: 12.5rem;
}

/* 新增图片容器样式 */
.image-container {
    position: relative;
    display: inline-block;
    line-height: 0; /* 消除容器默认行高导致的间距 */
}

/* 新增文字覆盖层样式 */
.image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.6);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Cutive Mono', monospace;
    font-size: 1.2rem;
    opacity: 0; /* 默认隐藏 */
    transition: opacity 0.3s ease; /* 平滑过渡 */
}

/* 悬停触发的效果 */
.image-container:hover img {
    opacity: 0.4;
    transition: opacity 0.3s ease;
}

.image-container:hover .image-overlay {
    opacity: 1;
}

.empic-tall1{
    height: 375px;
    width: 321px;
    transition: opacity 0.3s ease;
}
.empic-tall1a{
    height: 350px;
    width: 350px;
    transition: opacity 0.3s ease;
}

.empic-short1{
    height: 375px;
    width: 446px;
    transition: opacity 0.3s ease;
}
.empic-tall2{
    height: 332px;
    width: 279px;
    transition: opacity 0.3s ease;
}
.empic-short2{
    height: 332px;
    width: 403px;
    transition: opacity 0.3s ease;
}

.row-padding{
    padding-bottom: .3rem;
}

.navbar-text{
    font-family: 'Cutive Mono', monospace;
    font-size: 1.2rem;
    
}
.logo-text{
    color: #000281;
    font-family: 'Cedarville Cursive', cursive;
    padding-top: 10px;
}

hr{
    color: #fff;
}

关键修改点

给图片列添加d-flex gap-2 justify-content-center类，解决图片堆叠问题，实现横向排列并保留间距
新增.image-container相对定位容器，确保覆盖层能精准覆盖对应图片
新增.image-overlay绝对定位覆盖层，通过opacity控制显示/隐藏
给所有图片和覆盖层添加transition属性，实现平滑的悬停过渡效果

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

为图片集实现鼠标悬停文字覆盖层效果求助

原HTML代码 #

原CSS代码 #

修改后的实现方案 #

核心思路 #

修改后的HTML代码（仅替换Portfolio Pictures部分） #

修改后的CSS代码 #

关键修改点 #

原HTML代码

原CSS代码

修改后的实现方案

核心思路

修改后的HTML代码（仅替换Portfolio Pictures部分）

修改后的CSS代码

关键修改点