<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;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.