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/

使用CSS过渡淡入隐藏的div

2 个答案: