用CSS转换淡入隐藏div
问题描述:
我有一个图像位于div
内。当您将鼠标悬停在div上时,它会在顶部显示一个标题。标题div
有一个我想淡入的背景颜色。这可能吗?我试过应用一个转换,但它似乎不适用于块元素。用CSS转换淡入隐藏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;
}
答
移动transition
财产.box
到.overlay
,和动画不透明度代替显示:
.overlay {
transition: all 0.5s ease-in-out;
opacity: 0;
}
.box:hover .overlay {
opacity: 1;
}
很好的回答,但不透明度值的范围是0和1,(不是100) – vals 2015-03-30 19:08:10
咄之间,我在思考的百分比。更新,谢谢! – 2015-03-30 19:09:16
真棒回答,谢谢! – Squideyes 2015-03-30 19:15:49