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

Question

Please take a look at this link, http://codepen.io/funhyun/pen/eLmFp .

I am trying to achieve a css3 hover animation effect where upon hovering the thumbnail, the black color overlays with the carot to click animates in. At the moment, when you hover the image, nothing happens. However, if you remove the IMG tag on line 3 of the html code, then it works. How can I make it animate with the image? Any help is greatly appreciated!!

Answer 1

Its working but the overlay is moved below the image. If you remove overflow: hidden of #box, you can see it working.

you need to give position: absolute to the overlay.

check this

I have used your same code of your's.

Answer 2

Your problem is, that your overlay div isn't over the image, it's under it. Solved by removing the image tag and adding the image as background-image to #box, see here Hope i could help :)

Answer 3

You can use this css. it will work fine

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