用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/