javascript - 悬停时图像从另一个图像后面滑出

Question

我找到了一个主题，其中一位 friend 需要一些非常接近我想要的东西，但是因为我只是一个 new CSS 和 JQuery 的业余爱好者，所以我做不到想办法!那个话题大概是 2012 年的，那已经很老了!
The topic in question

所以我想要的就像这个网站上的那个:
point the cursor at the cinemagraph bird logo at the middle of screen

区别是:
1) 在我链接的主题中，动画不考虑鼠标位置，但在我的示例中，它在光标悬停时动画化，当鼠标移开时倒带
2) 在我的示例中，两个图像都移到了一边，但在那个主题中它不是

和其他你可以看到自己的差异

感谢您的回复

Answer 1

试试这个来达到类似的效果。

创建两个<div>内外元素 <div>

<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>

然后应用下面的CSS来实现悬停效果:

#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 */
}

想法是让 <div> ID为“sub”的最初是隐藏的。悬停外部 div 后，将显示“子”div。

这是一个演示概念的 JSFiddle:http://jsfiddle.net/X53na/1/