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

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

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

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

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

Updated Example

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

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

Answer 2

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

编辑：啊..我应该在发布我的之前查看其他提交的内容。对不起。

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

Fading an image into another image transition

html

image

css

fade