changing the filling of the block when hovering - html

Question

I want to make smt like this
img
Make background opacity and make visible two lines text and little picture (arrow) when hovering.
I know, i can make it just using other picture for background (make opacity in Photoshop), but i want to know how to make it with 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>
<img src="http://anti-naruto.ru/img/product-2.jpg" alt="">
<img src="http://anti-naruto.ru/img/product-3.jpg" alt="">
<a href="#"><img src="http://anti-naruto.ru/img/product-4.jpg" alt=""></ahttps://stackoverflow.com/questions/ask#>
</div>

Answer 1

You need to use absolute positioning to achieve this. Please see my snippet:
.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>