关于动画悬停解决方案查询的CSS3

Question

请查看此链接http://codepen.io/funhyun/pen/eLmFp。

我正在尝试实现css3悬停动画效果，在悬停缩略图时，黑色覆盖着carot点击动画。此时，当你悬停图像时，没有任何反应。但是，如果您删除html代码的第3行上的IMG标记，则它可以正常工作。如何使其与图像一起动画？非常感谢任何帮助!!

Answer 1

它工作但叠加层移动到图像下方。 如果您删除了溢出：隐藏的#box，您可以看到它正常工作。

你需要给位置：绝对覆盖。

check this

我使用了你的相同代码。

Answer 2

你的问题是，你的叠加div不在图像上，它在它下面。 通过删除图片代码并将图片作为背景图片添加到#box来解决问题，请参阅here 希望我能提供帮助：）

Answer 3

你可以使用这个CSS。它会正常工作

  #box    {  width:300px;
               height:200px;
              margin:5% auto 0 auto; 
              overflow:hidden;
               position:relative;
                background: #ccc;}

    #overlay    {  background:#333;
                   text-align:center;
                   padding:45px 0 66px 0;
                   opacity:0;
                    position:absolute;

                top:0px;
                right:0px;
                left:0px;
                   -webkit-transition: opacity .25s ease;}