我正在尝试弄清楚如何为半透明图像覆盖(显示在 :hover 上)提供 CSS3 过渡(轻松)。但它不起作用。我不确定是不是因为我遗漏了一些东西,或者过渡是否只是不适用于 display 属性。关于 CSS 解决方法的任何想法(我不知道 JavaScript)?提前致谢。
相关的 HTML 和 CSS:
<div class="thumbnail">
<figure>
<img src="images/dude.jpg" alt=""/>
</figure>
<div class="thumbnail-overlay">
<h2>Project Name</h2>
<h3> Skills Skills Skills</h3>
<p>This is a project description.</p>
</div>
</div>
.thumbnail {
position:relative;
float:left;
width:40%;
margin:1.5% 1.5% 0 0;
}
.thumbnail-overlay {
background-color: @dark-gray;
display:none;
opacity:.9;
position:absolute;
top:0;
left:0;
width:100%; height:100%;
overflow:hidden;
-webkit-transition:all .3s ease;
-moz-transition:all .3s ease;
transition:all.3s ease;
}
.thumbnail:hover .thumbnail-overlay {
display:block;
}
最佳答案
在我看来是因为显示属性。 css transition 不适用于它,这就是你遇到这个问题的原因。
这是我测试过的 css 代码,工作正常:
.thumbnail .thumbnail-overlay {
background-color: @dark-gray;
display:block;
opacity:0;
position:absolute;
top:0;
left:0;
width:100%; height:100%;
overflow:hidden;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.thumbnail:hover .thumbnail-overlay {
opacity: .9;
}
希望对您有所帮助!!!
关于html - 如何将 CSS3 过渡添加到图像叠加?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17962677/