CSS图像叠加延迟显示:无显示:块

Question

我有一个带有按钮的图像.如果我将鼠标悬停在图像上,则该按钮才可见.

我从改变display:none到display:block,它立即显示.

我想将此按钮的外观延迟1秒或使其显示为线性,因此它是平滑过渡.我看到了CSS3 transition特性和应用这一点,通过使用opacity,太(0.0 to 1.0).

它似乎不起作用.我错过了什么？我不认为-webkit具体的属性是原因.

看看我的fiddle.js例子:

Fiddle.js:图像悬停在叠加转换示例上

谢谢!

Answer 1

这是一个工作小提琴

我使用all而不是opacity,但无论哪种方式,你也可以改变它.

.image_controls{
    position: absolute;
    left: 0;
    top:5px;
    opacity:0.0;


}

.image_wrapper:hover .image_controls {
    -webkit-transition: all 2s ease;
    transition: all 2s ease;
    display: block;
    opacity:.9;

}