CSS image overlay delay display:none to display:block

Question

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.

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).

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

Check out my fiddle.js example:

Fiddle.js: Image hover over overlay transition example

Thank you!

i see no try of transition, opacity, nor even a button in your fiddle ? — G-Cyrillus, Feb 21 '14 at 18:47
Also, you are going to need to include the relevant code in your question as well (not just JSFiddle) so that it can help others years from now. — Keith, Feb 21 '14 at 18:48
Works here: http://jsfiddle.net/sNXc3/5/ You shouldn't set display property to none — A. Wolff, Feb 21 '14 at 18:52
Exactly what I need Wolff. I was unsure if `opacity`is handled like `visibility` property and not `display` — zer02, Feb 21 '14 at 18:55

score 8 · Accepted Answer · answered Feb 21 '14 at 18:55

8

Here is a working fiddle

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

.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;

}

answered Feb 21 '14 at 18:55

rockStar

1,296
12
22

thanks @rockStar also working. I upvoted, but wolff did answer first. – zer02 Feb 21 '14 at 18:58
its cool bro, as long as you got your answer. – rockStar Feb 21 '14 at 18:59
@zer02 you could still consider to accept this answer ;) – A. Wolff Feb 21 '14 at 19:01
his fiddle was just fine if display:none was removed. transition works only on value that can be incremented (or oppposite) , display is a state ! – G-Cyrillus Feb 21 '14 at 19:22

score 0 · Answer 2 · answered Feb 21 '14 at 18:51

0

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?

answered Feb 21 '14 at 18:51

lucasnadalutti

5,818
1
28
48

I unchecked javascript/jquery now. I would need the CSS(3) option. – zer02 Feb 21 '14 at 18:53

CSS image overlay delay display:none to display:block

2 Answers2