title: CSS3 transform scale covers another elements on hover
body: <p>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</p>
  
  <p>Here's my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&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;24 Jan&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;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The external link to see the issue <a href="http://jsfiddle.net/a49evb1q/" rel="nofollow noreferrer">http://jsfiddle.net/a49evb1q/</a></p>
  
  <p>Is there any solution to overcome the issue?</p>