CSS3转换比例涵盖了悬停时的另一个元素

Question

我有一个博客元素有2个孩子：.blog-header（包含背景图片）和.blog-body ..当鼠标悬停在.blog-header上时，我希望图像能够完美缩放。但问题出在这里：图像占据.blog-body应该放置的空间

这是我的代码：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

查看问题http://jsfiddle.net/a49evb1q/

的外部链接

有没有解决方案来解决这个问题？

Answer 1

z-index .blog-body .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;
}

示例......

＆＃13;

＆＃13;

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

＆＃13;

z-index

＆＃13;

＆＃13;

＆＃13;

修改

实际上，您可以完全删除代码中的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; }会自行处理

更新了示例......

＆＃13;

＆＃13;

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

＆＃13;

{{1}}

＆＃13;

＆＃13;

＆＃13;