html - 悬停时更改 block 的填充

Question

我想把smt做成这样 img

使背景不透明，并在悬停时使两行文本和小图片(箭头)可见。我知道，我可以只使用其他图片作为背景(在 Photoshop 中设置不透明度)，但我想知道如何使用 CSS 制作它

.futured {
    padding: var(--product-padding);
    display: grid;
    grid-template-columns: repeat(4, 270px);
    grid-template-rows: 1fr;
    grid-gap: 30px;
}
.lamp{
    background-image: url(http://anti-naruto.ru/img/product-1.jpg);
    align-content: center;
    padding: 30% 15px 30%;
}
.lamp p:first-child{
    font-family: Montserrat;
    color:  #212121;
    font-size: 1.369em;
    font-weight: 700;
    line-height: 1.369;
    text-align: center;
    opacity: 0;
}
.lamp p:first-child:hover{
   opacity: 1; 
}

.lamp p:last-child{
    font-family: Montserrat;
    color:  #6c6c6c;
    font-size: 0.871em;
    font-weight: 300;
    line-height: 1.578;
    text-align: center;
    opacity: 0;
}

.lamp p:last-child:hover{
   opacity: 1; 
}

.lamp:hover{
    
}

<div class="futured">
            <div class="lamp">
                <a href="#">
                    <p>Fishnet Chair</p>
                    <p>Seat and back with upholstery made of cold cure foam</p>
                </a>
            </div>
            <a href="#"><img src="http://anti-naruto.ru/img/product-2.jpg" alt=""></a>
            <a href="#"><img src="http://anti-naruto.ru/img/product-3.jpg" alt=""></a>
            <a href="#"><img src="http://anti-naruto.ru/img/product-4.jpg" alt=""></ahttps://stackoverflow.com/questions/ask#>
        </div>

Answer 1

您需要使用绝对定位来实现这一点。请看我的代码片段:

.item {
  position: relative;
}

.item .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  background: rgba(255, 255, 255, 0.8);
}

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

<div class="item">
  <img src="http://anti-naruto.ru/img/product-1.jpg" alt="">
  <div class="overlay">
    <h2>Test</h2>
    <p>Description</p>
  </div>
</div>
<div class="item">
  <img src="http://anti-naruto.ru/img/product-1.jpg" alt="">
  <div class="overlay">
    <h2>Test</h2>
    <p>Description</p>
  </div>
</div>
<div class="item">
  <img src="http://anti-naruto.ru/img/product-1.jpg" alt="">
  <div class="overlay">
    <h2>Test</h2>
    <p>Description</p>
  </div>
</div>
<div class="item">
  <img src="http://anti-naruto.ru/img/product-1.jpg" alt="">
  <div class="overlay">
    <h2>Test</h2>
    <p>Description</p>
  </div>
</div>