css - 如何定位两个居中的 DIV 相互重叠并做出响应？

Question

我正在尝试将两个 DIV 放在彼此之上，以便当指针悬停在图片上方时，顶部的会淡化以显示下方的那个。我在这里这样做:http://quaystreet.chrisloughnane.net/

我想让它响应，这样图片就会缩放到移动设备的水平宽度。一张图片没问题，但当我尝试重新定位下方的 DIV 时，它就坏了。

http://jsfiddle.net/chrisloughnane/f2NdQ/4/

是否可以仅使用 CSS 来完成我想做的事情？

<div id='old'><img src="http://quaystreet.chrisloughnane.net/images/quay-street-old.jpg"/></div>
<div id='new'><img src="http://quaystreet.chrisloughnane.net/images/quay-street-new.jpg"/></div>

img {
    max-width: 100%;
    display: block;
    margin: auto;
}

Answer 1

开始吧

Live Example

CSS:

.images {
    width: 100%;
    position: relative;
    max-width: 354px;
    margin: 0 auto;
}

.images img {
    position: absolute;
    top: 0;
    width: 100%;
    max-width: 354px;
}

JavaScript:

 $(document).ready(function() {    
      $('.images').on('mouseenter', function(){
          $('.images .old').fadeOut(1000);
      }).on('mouseleave', function(){
          $('.images .old').fadeIn(1000);
      });
 });

HTML:

<div class="images">
    <img class="new" src="http://quaystreet.chrisloughnane.net/images/quay-street-new.jpg">
    <img class="old" src="http://quaystreet.chrisloughnane.net/images/quay-street-old.jpg">    
</div>

你知道的一些事情:

1. 为了让每个 div 都在彼此的前面，我使用了绝对位置。
2. 我更改了您为使 div 淡出所做的整个操作，我认为这种方式更简洁
3. 我将您的 HTML 更改为使用绝对位置。
4. 您的 img 宽度将为 100%，而 max-width 354px 可以是任何值，只要是您的 img 将使用的最大宽度即可。因此，当小于 354px 时，他将使用 100% 的整个 div。

编辑:

如果你不关心browser support您可以使用 CSS3 转换，注意没有 IE<10.
Here is the answer with transition