CSS3 transform scale covers another elements on hover - css

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>