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

Question

好,

所以我有一个<figure>元素,我想transform: scale(1.2)在开启时使用:hover.

除了一个问题,它工作正常:左边重叠很好,右边保留在下一个元素下面.

这是JsFiddle

如您所见,左侧与前一个元素重叠,右侧"重叠"下一个元素.

这是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>

这是CSS:

.list-cover figure {
  display: inline-block;
  margin: .2em;
  transition: transform .3s ease-out;
  max-height: 315px;
  min-height: 315px;
}

.list-cover figure:hover,
.list-cover figure:active {
  transform: scale(1.2);
}

.list-cover figcaption {
  background: rgba(46, 204, 113, .7);
  margin-top: -30%;
  position: relative;
  padding: .5em;
  padding-top: 1.1em;
  transition: background-color .3s ease;
}

.list-cover figure:hover figcaption,
.list-cover figure:active figcaption {
  background-color: #ec008c;
}

.list-cover a {
  color: #fff;
}

任何人都知道如何让右侧与下一个元素重叠？

Answer 1

你需要增加z-index的figure被徘徊.但为了使其生效,您还需要提供它,position: relative因为z-index仅适用于非静态元素.

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

演示