CSS3 on动画悬停解决方案查询

Question

请看一下这个链接，http://codepen.io/funhyun/pen/eLmFp。

我正在尝试实现一个css3悬停动画效果，当鼠标悬停在缩略图上时，黑色覆盖了要单击的carot动画。此时，当您将鼠标悬停在图像上时，什么也没有发生。但是，如果您删除html代码第3行的IMG标记，它就可以正常工作。如何使用图像使其具有动画效果？非常感谢您的帮助！

Answer 1

它可以工作，但覆盖被移动到图像下方。如果你移除了#box的overflow: hidden，你可以看到它在工作。

您需要将position: absolute赋给overlay。

check this

我用了你的代码和你的一样。

Answer 2

你的问题是，你的覆盖div不是在图像之上，而是在它的下面。通过删除图像标签并将图像作为背景图像添加到#框中来解决，请参阅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;}