Как сделать, чтобы следующие изображения не перекрывали предыдущие?

Question

[Денис Кузьмин]

Как сделать, чтобы изображение внутри .dop_img не перекрывало предыдущие?

<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_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>
<style>
.image {
  position: relative;
  width: 250px;
  border: 1px solid gray;
  z-index: 1;
}
.dop_imgs {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  z-index: 2;
}
.dop_img {
  flex: 1;
  z-index: 2;
}
.dop_img:hover img {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
img {
  max-width: 100%;
  height: auto;
}
</style>

На codepen:

Answer 1

[Виталий Першин]

dop_img:hover {z-index: -1}

Comments

[Денис Кузьмин]

То, что надо. Спасибо.