CSS3 transform scale covers another elements on hover -

I have a blog element that has 2 children: .blog-header (includes background image) and .blog-body .. When mouse is to hover over the .blog-header, I hope the image should be scaled up completely. But here's the problem: the image moves to the place where Blog-body should be kept

This is my code:

  .blog {background: white; Margin-top: 20px; Border-top: 3px primary solid; Border below 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; Infections: 0.25s easily out; } .blog .blog-header .blog-bg-header: hover {cursor: pointer; Consequently, scale (1.3); } .blog-body {margin: -60px 20px 0 20px; Padding: 20px 20px 10px 20px; Background: white; Z-index 100; }  

  & lt; Article class = "blog" & gt; & Lt; Header class = "blog-header" & gt; & Lt; Div class = "blog-bg-header" style = "background-image: url ('http://placehold.it/1350x750')" & gt; & Lt; / Div & gt; & Lt; / Header & gt; & Lt; Div class = "blog-body" & gt; & Lt; Time class = "blog-date" & gt; January 24 & lt; / Time & gt; & Lt; A href = "example.com" & gt; & Lt; H2 & gt; Title & lt; / H2 & gt; & Lt; P & gt; Content & lt; / P & gt; & Lt; / A & gt; & Lt; / Div & gt;  
  
  
 External link to view this issue  
 Is there a solution to overcome this issue? ? Thank you ..   
 
 
 Your  z-index  on  .blog- There will be no effect of body  because you are not giving it a position. 
 
  .blog-body {margin: -60px 20px 0 20px; Padding: 20px 20px 10px 20px; Background: white; Z-index 100; Status: Relative; & Lt ;! - ADD THIS}  
 
 Example ... 
 
 
 
 
  .blog {background: white; Margin-top: 20px; Border-top: 3px primary solid; Border below 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; Infections: 0.25s easily out; } .blog .blog-header .blog-bg-header: hover {cursor: pointer; Consequently, scale (1.3); } .blog-body {margin: -60px 20px 0 20px; Padding: 20px 20px 10px 20px; Background: white; Z-index 100; Status: Relative; }  
 
  & lt; Article class = "blog" & gt; & Lt; Header class = "blog-header" & gt; & Lt; Div class = "blog-bg-header" style = "background-image: url ('http://placehold.it/1350x750')" & gt; & Lt; / Div & gt; & Lt; / Header & gt; & Lt; Div class = "blog-body" & gt; & Lt; Time class = "blog-date" & gt; January 24 & lt; / Time & gt; & Lt; A href = "example.com" & gt; & Lt; H2 & gt; Title & lt; / H2 & gt; & Lt; P & gt; Content & lt; / P & gt; & Lt; / A & gt; & Lt; / Div & gt; In fact, you can see the  z-index         code> from your code Basically the value will be a  position: relative  on its own trick 
 
 updated example ... 
 
 
 
 
  .blog {Background: white; Margin-top: 20px; Border-top: 3px primary solid; Border below 3px solid #eee; } .blog .blog-header {overflow: hidden; } .blog .blog-header .blog-bg-header {height: 275px; Background-position: center; Background size: cover; Infections: 0.25s easily out; } .blog .blog-header .blog-bg-header: hover {cursor: pointer; Consequently, scale (1.3); } .blog-body {margin: -60px 20px 0 20px; Padding: 20px 20px 10px 20px; Background: white; Status: Relative; }  
 
  & lt; Article class = "blog" & gt; & Lt; Header class = "blog-header" & gt; & Lt; Div class = "blog-bg-header" style = "background-image: url ('http://placehold.it/1350x750')" & gt; & Lt; / Div & gt; & Lt; / Header & gt; & Lt; Div class = "blog-body" & gt; & Lt; Time class = "blog-date" & gt; January 24 & lt; / Time & gt; & Lt; A href = "example.com" & gt; & Lt; H2 & gt; Title & lt; / H2 & gt; & Lt; P & gt; Content & lt; / P & gt; & Lt; / A & gt; & Lt; / Div & gt; & Lt; / Article & gt;