我正在尝试找出如何给半透明图像叠加层(在:hover时出现)加上CSS3过渡效果(ease)。但是它没有起作用。我不确定是因为我漏掉了什么,还是过渡效果与display属性不兼容。有没有CSS的解决方法(我不知道JavaScript)?提前感谢您的帮助。
相关的HTML和CSS:
相关的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;
}