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