CSS image overlay delay display:none to display:block

css, html

Solution

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;

}

Problem

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!

Original source

Related problems