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

Question

我的图片上有一个按钮。如果我悬停在图片上，该按钮将仅可见。

我将其从display:none更改为display:block并立即显示。

我想将此按钮的外观延迟1秒或使其显示为线性，因此它是平滑过渡。我看到了CSS3 transition属性，并使用opacity同样应用了此属性{。{1}}。

似乎没有用。我错过了什么？我不认为(0.0 to 1.0)特定属性是原因。

查看我的小提琴.js示例：

  

Fiddle.js: Image hover over overlay transition example

谢谢！

Answer 1

这是一个有效的fiddle

我使用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;

}

Answer 2

您可以使用jQuery的fadeIn() / fadeOut()。当你标记javascript和jquery时，我想使用JS不会引起你的关注，对吧？