CSS3 变换比例覆盖悬停时的另一个元素

Question

我有一个博客元素，它有 2 个子元素:.blog-header(包含背景图像)和 .blog-body。当将鼠标悬停在 .blog-header 上时，我希望图像能够完美缩放。但这就是问题所在:图像占用了 .blog-body 应该放置的空间

这是我的代码:

.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>

外部链接看问题http://jsfiddle.net/a49evb1q/

有什么解决方案可以解决这个问题吗？

Answer 1

您在 .blog-body 上的 z-index 将无效，因为您没有给它一个位置。

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

示例...

.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>

编辑

实际上，您可以从代码中完全删除 z-index 值。 position: relative 会自行解决问题

更新示例...

.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>