Javascript 图像从悬停时的另一图像后面滑出

我发现一个话题，一个朋友需要一些非常接近我想要的东西，但因为我只是新CSS和JQuery的业余爱好者，所以我想不出来！这个话题是关于2012年的，而且很老了

所以我想要的就像这个网站上的：

区别在于：
1） 在我链接的主题中，动画没有注意到鼠标位置，但在我的示例中，当光标位于动画上时，动画会动画，当鼠标离开时，动画会倒转
2） 在我的例子中，两个图像都移动到一边，但在那个主题中，它不是

还有其他你可以看到的不同之处

---

感谢您的回复

尝试此方法可获得类似效果

在外部

中创建两个

元素

我们的想法是让id为“sub”的

最初隐藏起来。外部div悬停后，“sub”div将显示

---

这里有一个JSFiddle演示了这个概念：

谢谢，这就是我想要的；）

<div id='outer'>
   <div id='inner'>
       <!-- put first image here -->
   </div>
   <div id='sub'>
       <!-- put second image here, this will appear on hover -->
   </div>
</div>

#outer {
    width:100px;
    margin:10px auto;
    height:80px;
    position:relative;
    overflow:hidden;
    transition: width .5s;  /* change width over a period of 500ms */
}

#inner {
    height:100%;
    position:absolute; 
    width:100px;
    left:0px;
    top:0px;
    background-color:#9b3d3d;
}

#sub {
    height:100%;
    position:absolute;
    right:0px;
    top:0px;
    width:100px;
    opacity:0;
    background-color:#3a6d90;    
    transition: opacity .5s;  /* change opacity over a period of 500ms */
    z-index:-1;
}


#outer:hover {
    width:200px; /* expand outer div on hover , exposing the 'sub' div */
}

#outer:hover #sub {
    opacity:1;  /* change opacity to 1 so 'sub' div becomes visible */
}