Question

让这种淡化效果起作用我有点困难。我基本上有两个图像在彼此的顶部，我有一个悬停效果，使顶部图像的不透明度变为零，显示第二个图像。

当我只有一个部分时，此效果当前有效。当我添加另一部分时，一切都不合适。我怀疑这与我使用position: absolute的事实有关，但我不确定如何修复它。

我做了一个简单的例子来告诉你发生了什么。这是一个部分（功能）的样子：

<body>
  <header>
    <h1>Projects</h1>
    <h3>
      <a href="/">Home</a> | <a href="#">GitHub</a>
    </h3>
  </header>

  <hr>

  <section>
    <h2>Some project</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <div class="container">
      <img class="main image" src="http://i.imgur.com/EkfA9Tl.png" alt="">
      <img class="image" src="http://i.imgur.com/PWsXij1.png" alt="">
    </div>
  </section>
</body>

header {
  text-align: center;
}
section {
  width: 960px;
  margin: 0 auto;
}
.container {
  position: relative;
}
img {
  position: absolute;
  width: 650px;
  height: 400px;
  display: block;
}
.main {
  z-index: 5;
  transition: opacity .3s ease-in-out;
}
.main:hover {
  opacity: 0;
}

您可以在此处查看：http://jsfiddle.net/503dhw51/

当我尝试使用两个部分时，整个事情就会中断。这是两个部分的代码：

<body>
  <header>
    <h1>Projects</h1>
    <h3>
      <a href="/">Home</a> | <a href="#">GitHub</a>
    </h3>
  </header>

  <hr>

  <section>
    <h2>Some project</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <div class="container">
      <img class="main image" src="http://i.imgur.com/EkfA9Tl.png" alt="">
      <img class="image" src="http://i.imgur.com/PWsXij1.png" alt="">
    </div>
  </section>

  <section>
    <h2>Some project</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <div class="container">
      <img class="main image" src="http://i.imgur.com/EkfA9Tl.png" alt="">
      <img class="image" src="http://i.imgur.com/PWsXij1.png" alt="">
    </div>
  </section>
</body>

和CSS是一样的。

以下是jsfiddle：http://jsfiddle.net/5asgswxr/1/

我基本上有两个需要解决的问题：

让它适用于多个部分
一旦我修复了第一部分

对于这些问题中的任何一个，我将不胜感激。提前谢谢！

Answer 1

Here is my attempt。您可以将其与其他标签一起使用而不是图像。

/*assures images to be of the same size*/
.frame { height: 300px; width:300px; }

/* code for effect you are looking for*/
figure { overflow: hidden; position: relative; border:solid lightgray 2px;}
.img1 { left: 0; position: absolute; right: 0; top: 0;
    -webkit-transition: all 100ms ease-out;-moz-transition: all 500ms ease-out;transition: all 500ms ease-out;
    border-radius: 5px 5px 5px 5px;-moz-border-radius: 5px 5px 5px 5px;-webkit-border-radius: 5px 5px 5px 5px;
}
.img1:hover { opacity: 0;}

/** important having things not "float" around*/
.clearfix:after { content: ".";display: block;clear: both;visibility: hidden;line-height: 0;height: 0;}
.clearfix { display: inline-block; }
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }

编辑：啊......我应该在发帖之前查看其他提交内容。抱歉。

Answer 2

如您所料，问题在于您绝对定位所有img元素。当元素绝对定位时，它将从正常流中移除，导致其他元素不考虑（因此，重叠）。

由于.container元素仅包含绝对定位的元素，因此它会自行折叠并具有0的高度。为避免这种情况，一个选项是在父元素上设置显式高度/宽度。

或者，更好的选择是仅绝对定位单个 img元素。这样，.container元素将保留在正常流程中（因为img元素中的一个元素未从流中移除）。在这种情况下，您绝对可以使用类img定位.main元素。这样做时，另一个img元素保留在正常流程中，并定义父元素.container元素的高度/宽度。

Updated Example

.container {
  position: relative;
}
.container img.main {
  position: absolute;
}

关于你的第二个问题（关于居中），请看一下这个updated example。

将图像淡入另一个图像过渡

2 个答案: