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

小提琴