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

【问题标题】：CSS3 transform scale covers another elements on hoverCSS3 变换比例覆盖悬停时的另一个元素
【发布时间】：2015-05-19 18:59:29
【问题描述】：

我有一个博客元素，它有 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/

有什么办法可以解决这个问题吗？

【问题讨论】：

标签： css hover scale css-transforms

【解决方案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>

【讨论】：

谢谢，伙计。真的行。其实就是这么简单，哈哈