Css 如何定位两个相互重叠的中心div并做出响应？

我试图将两个div放置在彼此上方，这样当指针悬停在图片上方时，顶部的div会淡出，以显示下方的div。我在这里这样做：

我想让它具有响应性，以便图片可以缩放到移动设备的水平宽度。这是没有问题的一张照片，但一旦我试图重新定位下方的DIV它打破

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

img{
最大宽度：100%；
显示：块；
保证金：自动；
}

我们开始了

CSS:

JavaScript:

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

HTML:

有些事情你要知道：

为了使每个div在彼此前面，我使用绝对位置

我改变了你所做的一切，使div淡出，我认为这样更干净

我将HTML更改为使用绝对位置

您的img将是100%宽度，最大宽度

354px

可以是任何值，只要是img将使用的最大宽度即可。因此，当低于354px时，他将使用100%的整个div

编辑：

如果你不在乎你可以使用CSS3转换，注意不要IE我们开始了

CSS:

JavaScript:

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

HTML:

有些事情你要知道：

为了使每个div在彼此前面，我使用绝对位置

我改变了你所做的一切，使div淡出，我认为这样更干净

我将HTML更改为使用绝对位置

您的img将是100%宽度，最大宽度

354px

可以是任何值，只要是img将使用的最大宽度即可。因此，当低于354px时，他将使用100%的整个div

编辑：

---

如果您不关心CSS3转换，请注意不要使用IEJavaScript，这并不是必需的。您可以通过平滑的CSS3转换实现相同的行为

.images {
    position: relative;
    margin: 0 auto;
}
.images img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 354px;
    -webkit-transition: opacity .8s linear 0s;
    transition: opacity .8s linear 0s;
}
.images img:first-child {
    z-index: 2;
}
.images img:first-child:hover {
    opacity: 0;
}

---

示例fiddle:

JavaScript它实际上并不必要。您可以通过平滑的CSS3转换实现相同的行为

.images {
    position: relative;
    margin: 0 auto;
}
.images img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 354px;
    -webkit-transition: opacity .8s linear 0s;
    transition: opacity .8s linear 0s;
}
.images img:first-child {
    z-index: 2;
}
.images img:first-child:hover {
    opacity: 0;
}

---

小提琴示例：

嘿，兄弟，你的链接等于我的兄弟，我喜欢！那么浏览器支持呢？所有现代浏览器：在旧浏览器上，它只是降级而没有转换嘿，兄弟，你的链接等于myAewsome，我喜欢它！那么浏览器支持呢？所有现代浏览器：在旧浏览器上，它只是降级而没有转换