Question

确定，

所以我在<figure>上使用transform: scale(1.2)时想要缩放:hover元素。

除了一个问题之外它工作正常：左边重叠很好，右边保留在下一个元素下面。

这里是 JsFiddle

正如你所看到的，左边的元素与前面的元素重叠，右边的＆＃34; underlaps＆＃34;下一个元素。

这里是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的{{1}}。但为了使其生效，您还需要给它figure，因为z-index仅适用于非静态元素。

position: relative

Demo

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

1 个答案: