CSS图像叠加延迟显示：无显示：块[复制]

This question already has an answer here:

这个问题在这里已有答案:

Delay :Hover in CSS3? 3 answers

延迟:在CSS3中悬停? 3个答案

I have an image with a button on it. The button will only be visible, if I hover over the image.

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

I change it from display:none to display:block and it appears instantly.

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

I would like to delay the appearance of this button by 1 sec or make it appear linear, so it's a smooth transition. I saw the CSS3 transition property and applied this, by using opacity, too (0.0 to 1.0).

我想将此按钮的外观延迟1秒或使其显示为线性,因此它是平滑过渡。我看到了CSS3过渡属性并通过使用不透明度(0.0到1.0)应用了它。

It seems not to be working. What am I missing? I don't think the -webkit specific properties are the reason.

它似乎不起作用。我错过了什么?我不认为-webkit特定的属性是原因。

Check out my fiddle.js example:

看看我的fiddle.js例子:

Fiddle.js: Image hover over overlay transition example

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

Thank you!

2 个解决方案

#1

Here is a working fiddle

这是一个工作小提琴

I have use all instead of opacity, but either way you can change that too.

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

}

#2

You could use jQuery's fadeIn() / fadeOut(). As you tagged javascript and jquery, I guess using JS would not be a concern for you, right?

你可以使用jQuery的fadeIn()/ fadeOut()。当你标记javascript和jquery时,我想使用JS不会是你的问题,对吧?

#1