css变换比例 - 在左边但不是右边重叠 [英] css transform scale - overlaps on left but not right

问题描述

好的，

所以我想要< figure> 元素，我希望使用<$进行扩展c $ c> transform：scale（1.2）在时：悬停。

So I have a <figure> element that I want to scale using transform: scale(1.2) when on :hover.

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

It works fine except for one issue: the left overlaps fine, the right remains below the next element.

这是 JsFiddle

Here's the JsFiddle

如您所见，左侧与前一个重叠元素罚款，右边欠下一个元素。

As you can see, the left overlaps the previous element fine, the right "underlaps" the next element.

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

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

Anyone have any idea how I can get the right side to overlap the next element?

推荐答案

你需要增加 z-index 的数字正在盘旋。但为了使其生效，你还需要给它 position：relative 因为z-index只适用于非静态元素。

You need to increase the z-index of the figure being hovered. But in order for this to take effect, you also need to give it position: relative because z-index only works with non-static elements.

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

演示

这篇关于css变换比例 - 在左边但不是右边重叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！