用CSS轉換淡入隱藏div

Question

我有一個圖像位於div內。當您將鼠標懸停在div上時，它會在頂部顯示一個標題。標題div有一個我想淡入的背景顏色。這可能嗎？我試過應用一個轉換，但它似乎不適用於塊元素。

這裏的JSFiddle和代碼：

HTML

<div class="box"> 
    <img src="http://bit.ly/1G1Pcbz" alt="coding"> 
    <div class="overlay"> 
     This is my caption overlay. 
    </div> 
</div> 

CSS

img { 
    height: auto; 
    max-width: 100%; 
} 
.box { 
    position: relative; 
    display: block; 
    width: 200px; 
    height: 117px; 
    background: #ccc; 
    transition: all 0.5s ease-in-out; 
} 
.overlay { 
    display: none; 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
    background: red; 
    z-index: 9999; 
} 
.box:hover .overlay { 
    display: block; 
} 

Answer 1

移動transition財產.box到.overlay，和動畫不透明度代替顯示：

.overlay { 
    transition: all 0.5s ease-in-out; 
    opacity: 0; 
} 

.box:hover .overlay { 
    opacity: 1; 
} 

Fiddle

Answer 2

我發現jQuery函數.fadeIn（）以方便使用。文檔可以在這裏找到：

http://api.jquery.com/fadein/