<div class="image">
  <div class="main_img">
    <img src="https://murom-mebel-spb.ru/sites/default/files/styles/full_product/public/products/krovat_bali_layt_1.jpg" />
  </div>
  <div class="dop_imgs">
    <div class="dop_img">
      <img src="https://murom-mebel-spb.ru/sites/default/files/styles/full_product/public/products/krovat_bali_layt_1.jpg" />
    </div>
    <div class="dop_img">
      <img src="https://murom-mebel-spb.ru/sites/default/files/styles/full_product/public/products/krovat_bali_layt_2.jpg" />
    </div>
    <div class="dop_img">
      <img src="https://murom-mebel-spb.ru/sites/default/files/styles/full_product/public/products/krovat_bali_layt_3.jpg" />
    </div>
    <div class="dop_img">
      <img src="https://murom-mebel-spb.ru/sites/default/files/styles/full_product/public/products/krovat_bali_layt_4.jpg" />
    </div>
    <div class="dop_img">
      <img src="https://murom-mebel-spb.ru/sites/default/files/styles/full_product/public/products/krovat_bali_layt_5.jpg" />
    </div>
</div>

.image {
  position: relative;
  width: 250px;
}
.dop_imgs {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  z-index: 1;
}
.dop_img {
  display: flex;
  flex-direction: column-reverse;
  flex: 1;
  z-index: 1;
}
.dop_img:hover {
  z-index: -1
}
.dop_imgs:hover .dop_img::before {
  content: "";
  width: 100%;
  height: 3px;
  background: #ececec;
}
.dop_imgs:hover .dop_img:hover::before {
  content: "";
  width: 100%;
  height: 3px;
  background: #000;
  border-radius: 2px;
}
.dop_img img {
  display: none;
}
.dop_img:hover img {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}
img {
  max-width: 100%;
  height: auto;
}