Question

我将这些图像放在一个简单的响应式网格中，尝试为其添加一个叠加层。当我将鼠标悬停在图像上时，id希望有3或4行给出一般性描述。默认情况下，图像会显示，并且当我将id悬停时喜欢显示文本时，我该怎么办？

这是我当前拥有的代码

    <div class="container">
    <div class="product-item">
        <a href="products.html"><img src="https://images.unsplash.com/photo-1587202372583-49330a15584d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60 " alt=" "></a>
    </div>

    <div class="product-item">
        <a href="products.html"><img src="https://images.unsplash.com/photo-1555485086-b0d5d518b225?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60 " alt=" "></a>
    </div>
    <div class="product-item">
        <a href="products.html"><img src="https://images.unsplash.com/photo-1555404910-2c3475578b36?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60 " alt=" "></a>
    </div>
</div>

    .home-body .container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center !important;
    margin: 5em 0 0 0;
}

.home-body img {
    margin: 5px;
    transition: all 1s;
}

.home-body img:hover {
    transform: scale(1.05);
    transition-duration: .3s;
    filter: grayscale(20%);
    opacity: 90%;
    cursor: pointer;
}

.product-item {
    background-color: #212121;
    margin: 5px;
}

这是我想我可以做的，但是不知道如何用html / css实现它

        <div class="container ">
          <img src="img.jpg" alt=" ">
           <div class="overlay-text">
            <h3>Random Title</>
              <p>Random description</p>
              <p>Random description</p>
              <p>Random description</p>
            </div
        </div>

Answer 1

最简单的解决方案是：

添加4个用于您所描述的文字标签，并为其分配一个类。
将display: none;添加到课程中。
例如，将display: block;添加到班级的:hover。

HTML：

        <div class="container ">
          <img src="img.jpg" alt=" ">
           <div class="overlay-text">
            <h3>Random Title</>
              <p>Random description</p>
              <p>Random description</p>
              <p>Random description</p>
            </div
        </div>

CSS：

.overlay-text {
    display: none;
}

.overlay-text:hover {
    display: block;
}

此外：

如果您希望图像成为div的背景，请删除

<img src="img.jpg" alt=" ">

从HTML中添加，并将其添加到CSS中的overlay-text类中：

background-image: url("img.jpg");

Answer 2

这就是您要寻找的东西。

 .home-body .container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center !important;
            margin: 5em 0 0 0;
        }

        .home-body img {
            margin: 5px;
            transition: all 1s;
        }

        .home-body img:hover {
            transform: scale(1.05);
            transition-duration: .3s;
            filter: grayscale(20%);
            opacity: 90%;
            cursor: pointer;
        }

        .product-item {
            background-color: #212121;
            margin: 5px;
            position: relative;
        }

        .home-body a .hover-text {
            display: none;
        }
        .home-body a:hover .hover-text {
            display: block;
            position: absolute;
            text-align: center;
            color: #fff;
            left: 10%;
            top: 50%;
        }

<body class="home-body">
<div class="container">

        <div class="product-item">
            <a href="products.html"><img src="https://images.unsplash.com/photo-1587202372583-49330a15584d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60 " alt=" ">
    <div class="hover-text">
        <h3>Gaming PC</h3>
        <p>This is a gaming pc. This is a gaming pc. This is a gaming pc.</p>
    </div>
            </a>
        </div>

        <div class="product-item">
            <a href="products.html"><img src="https://images.unsplash.com/photo-1555485086-b0d5d518b225?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60 " alt=" ">
                <div class="hover-text">
                    <h3>Gaming PC</h3>
                    <p>This is a gaming pc. This is a gaming pc. This is a gaming pc.</p>
                </div>
            </a>
        </div>
        <div class="product-item">
            <a href="products.html"><img src="https://images.unsplash.com/photo-1555404910-2c3475578b36?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60 " alt=" ">
                <div class="hover-text">
                    <h3>Gaming PC</h3>
                    <p>This is a gaming pc. This is a gaming pc. This is a gaming pc.</p>
                </div>
            </a>
        </div>

</div>
</body>

悬停在图像上时创建文本覆盖

2 个答案: