css transform scale - overlaps on left but not right

Question

Ok,

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.

Here's the JsFiddle

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

Here's the 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>

And here's the 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?

Answer 1

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

Demo