CSS3 transform scale covers another elements on hover

Question

I have a blog element which has 2 children: .blog-header (contains background image) and .blog-body.. When hovering the mouse on .blog-header, i expect the image to be scaled perfectly. But here's the problem: the image takes the space where .blog-body should lay on

Here's my code:

.blog {
  background: white;
  margin-top: 20px;
  border-top: 3px primary solid;
  border-bottom 3px solid #eee;
}
.blog .blog-header {
  overflow: hidden;
  z-index 90;
}
.blog .blog-header .blog-bg-header {
  height: 275px;
  background-position: center;
  background-size: cover;
  transition: 0.25s ease-in-out;
}
.blog .blog-header .blog-bg-header:hover {
  cursor: pointer;
  transform: scale(1.3);
}
.blog-body {
  margin: -60px 20px 0 20px;
  padding: 20px 20px 10px 20px;
  background: white;
  z-index 100;
}

<article class="blog">
  <header class="blog-header">
    <div class="blog-bg-header" style="background-image: url('http://placehold.it/1350x750')"></div>
  </header>
  <div class="blog-body">
    <time class="blog-date">24 Jan</time>
    <a href="example.com">
      <h2>Title</h2>
      <p>Content</p>
    </a>
  </div>
</article>

The external link to see the issue http://jsfiddle.net/a49evb1q/

Is there any solution to overcome the issue?

Answer 1

Your z-index on .blog-body will have no effect because you aren't giving it a position.

.blog-body {
  margin: -60px 20px 0 20px;
  padding: 20px 20px 10px 20px;
  background: white;
  z-index 100;
  position: relative; <!-- ADD THIS
}

Example...

.blog {
  background: white;
  margin-top: 20px;
  border-top: 3px primary solid;
  border-bottom 3px solid #eee;
}
.blog .blog-header {
  overflow: hidden;
  z-index 90;
}
.blog .blog-header .blog-bg-header {
  height: 275px;
  background-position: center;
  background-size: cover;
  transition: 0.25s ease-in-out;
}
.blog .blog-header .blog-bg-header:hover {
  cursor: pointer;
  transform: scale(1.3);
}
.blog-body {
  margin: -60px 20px 0 20px;
  padding: 20px 20px 10px 20px;
  background: white;
  z-index 100;
  position:relative;
}

<article class="blog">
  <header class="blog-header">
      <div class="blog-bg-header" style="background-image: url('http://placehold.it/1350x750')"></div>
  </header>
  <div class="blog-body">
    <time class="blog-date">24 Jan</time>
    <a href="example.com">
      <h2>Title</h2>
      <p>Content</p>
    </a>
  </div>
</article>

EDIT

Actually, you can remove the z-index values from your code altogether. A position: relative will do the trick on it's own

Updated example...

.blog {
  background: white;
  margin-top: 20px;
  border-top: 3px primary solid;
  border-bottom 3px solid #eee;
}
.blog .blog-header {
  overflow: hidden;
}
.blog .blog-header .blog-bg-header {
  height: 275px;
  background-position: center;
  background-size: cover;
  transition: 0.25s ease-in-out;
}
.blog .blog-header .blog-bg-header:hover {
  cursor: pointer;
  transform: scale(1.3);
}
.blog-body {
  margin: -60px 20px 0 20px;
  padding: 20px 20px 10px 20px;
  background: white;
  position:relative;
}

<article class="blog">
  <header class="blog-header">
      <div class="blog-bg-header" style="background-image: url('http://placehold.it/1350x750')"></div>
  </header>
  <div class="blog-body">
    <time class="blog-date">24 Jan</time>
    <a href="example.com">
      <h2>Title</h2>
      <p>Content</p>
    </a>
  </div>
</article>