Html css变换比例-左侧重叠，但不右侧重叠

嗯

因此，我有一个

元素，我想在启用

：悬停时使用
变换：缩放（1.2）
进行缩放

除了一个问题外，它工作正常：左侧重叠良好，右侧仍位于下一个元素下方

这是

如您所见，左侧与上一个元素精细重叠，右侧与下一个元素“underlaps”

这是html

<section class="list-cover">
  <figure>
    <a href="" title="">
      <img src="http://ia.media-imdb.com/images/M/MV5BMTk0NDg4NjQ5N15BMl5BanBnXkFtZTgwMzkzNTgyMTE@._V1_SX214_AL_.jpg" alt="" />
      <figcaption>Caption Text</figcaption>
    </a>
  </figure>
  <figure>
    <a href="" title="">
      <img src="http://ia.media-imdb.com/images/M/MV5BMjAyMDM2ODExNF5BMl5BanBnXkFtZTgwNTI2MjkzMTE@._V1_SY317_CR9,0,214,317_AL_.jpg" alt="" />
      <figcaption>Caption Text</figcaption>
    </a>
  </figure>
  <figure>
    <a href="" title="">
      <img src="http://ia.media-imdb.com/images/M/MV5BMjIzMjgwMTQzMV5BMl5BanBnXkFtZTgwNDcyMjczMTE@._V1_SY317_CR0,0,214,317_AL_.jpg" alt="" />
      <figcaption>Caption Text</figcaption>
    </a>
  </figure>
  <figure>
    <a href="" title="">
      <img src="http://ia.media-imdb.com/images/M/MV5BMTg1MTIwODYwMl5BMl5BanBnXkFtZTgwNjAwNzQzMTE@._V1_SY317_CR2,0,214,317_AL_.jpg" alt="" />
      <figcaption>Caption Text</figcaption>
    </a>
  </figure>
  <figure>
    <a href="" title="">
      <img src="http://ia.media-imdb.com/images/M/MV5BMTgzNjQ4NjM1NF5BMl5BanBnXkFtZTcwNzQ4OTEzNw@@._V1_SY317_CR11,0,214,317_AL_.jpg" alt="" />
      <figcaption>Caption Text</figcaption>
    </a>
  </figure>
</section>

有人知道如何让右侧与下一个元素重叠吗？
您需要增加悬停的
图的
z-index
。但为了使其生效，您还需要为其指定
位置：relative
，因为z-index仅适用于非静态元素

.list-cover figure {
    ...
    position: relative;
}
.list-cover figure:hover, .list-cover figure:active {
    transform: scale(1.2);
    z-index: 10;
}

请使用我们都能看到的图像！PlaceKitten或LoremPizza是这项服务的绝佳选择。修改后的IDLE:-1不够出色！谢谢你，伙计！
.list-cover figure {
    ...
    position: relative;
}
.list-cover figure:hover, .list-cover figure:active {
    transform: scale(1.2);
    z-index: 10;
}