html - 如何将 CSS3 过渡添加到图像叠加？

Question

我正在尝试弄清楚如何为半透明图像覆盖(显示在 :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;
}

Answer 1

在我看来是因为显示属性。 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;
}

希望对您有所帮助!!!