CSS图像覆盖延迟显示：无显示：块[重复]

Posted 2023-05-08

【中文标题】CSS图像覆盖延迟显示：无显示：块[重复]

【英文标题】：CSS image overlay delay display:none to display:block [duplicate]

【发布时间】：2014-03-23 10:54:46

【问题描述】：

我有一张带有按钮的图片。如果我将鼠标悬停在图片上方，该按钮才会可见。

我将它从 display:none 更改为 display:block 并立即出现。

我想将此按钮的出现延迟 1 秒或使其显示为线性，因此这是一个平滑的过渡。我看到了 CSS3 transition 属性，并通过使用 opacity 和 (0.0 to 1.0) 应用了它。

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

查看我的 fiddle.js 示例：

Fiddle.js: Image hover over overlay transition example

谢谢！

【问题讨论】：

我没有看到任何过渡、不透明度，甚至没有你的小提琴中的按钮？

你的小提琴缺少一些代码....

我更新了它，它之前没有保存我的更改:) 抱歉

这里是 OP jsFiddle 链接：jsfiddle.net/sNXc3/4

在这里工作：jsfiddle.net/sNXc3/5 你不应该将 display 属性设置为 none

【参考方案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;

【讨论】：

感谢@rockStar 也在工作。我投了赞成票，但 wolff 确实先回答了。

很酷的兄弟，只要你得到你的答案。

@zer02 你仍然可以考虑接受这个答案；）

如果 display:none 被移除，他的小提琴就好了。转换仅适用于可以递增（或相反）的值，显示是一种状态！

【参考方案2】：

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

【讨论】：

我现在取消选中 javascript/jquery。我需要 CSS(3) 选项。