<div class="wrap">
<img src="https://oboi.ws/filters/vibrance_19_6191_oboi_derevja_na_beregu_ozera_240x320.jpg" alt="">
<div class="overlay">
<button>В корзину</button>
<button>В избранное</button>
</div>
</div>
.wrap {
position: relative;
width: 120px;
height: 160px;
overflow: hidden;
}
.wrap>img {
width: 100%;
height: 100%;
}
.overlay {
position: absolute;
display: none;
flex-flow: column nowrap;
justify-content: space-around;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
}
.wrap:hover .overlay {
display: flex;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.