html - 在悬停时向网格图像添加叠加层

Question

我有一个图片库，想在悬停时在其上方显示文本。我无法为图像描述设置特定大小，因为网格会不断调整大小。我知道我可以用非常具体的媒体查询来修复它，但我不想这样做。我有一个简单的方法吗？

.figure-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: relative;
}

.description {
    opacity: 0;
    background: black;
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;  
}

.img-container {
    overflow: hidden;
    width: 100%;
    height: 100%;
}

figure:hover .description {
    opacity: .8;
}

.d-name {
    color: white;
    font-size: 1.2em;
    font-weight: 600;
}

.d-item {
    color: white;
    font-size: 1.1;
}

<figure class="figure3">
    <img class="figure-img" src="images/propg" alt="5St.">
    <div class="description text-center">
        <p class="d-name">Tower</p>
        <p class="d-item">Pnsulation</p>
        <p class="d-item">topping</p>
    </div>
</figure>

<figure class="figure4">
    <img class="figure-img" src="image" alt="nehandler">
    <div class="description text-center">
        <p class="d-name"> Tower</p>
        <p class="d-item">nsulation</p>
        <p class="d-item">topping</p>
    </div>
</figure>

<figure class="figure5 ">
    <div class="img-container">
        <img class="figure-img" src="images/pr34th-St%20rendering.jpg" alt="4h St">
        <figcaption class="description text-center">
            <p class="d-name"> Tower</p>
            <p class="d-item">PInsulation</p>
            <p class="d-item"> Firestopping</p>
        </figcaption>
    </div>
</figure>

标签： htmlcssgridhoveroverlay