Css hover delay (filter)

Question

i use a greyscale filter for an image on my page and a very saturated filter for hover.

When the image is hovered, i want the img to have a delay of 2-3sec untill it gets saturated.

My codes are:

.image2{
    max-width:70%;
    border-radius: 5px;

    filter: grayscale(1);
    -webkit-filter: grayscale(1);
    -moz-filter: grayscale(1);
    -o-filter: grayscale(1);
    -ms-filter: grayscale(1);
}
.image2:hover{
    filter: saturate(500%),2s;
    -webkit-filter: saturate(500%);
    -moz-filter: saturate(500%);
    -o-filter: saturate(500%);
    -ms-filter: saturate(500%);
}

I tried playing with the transition-delay and several others but none worked.

Thanks for answering :)

Check this question out: http://stackoverflow.com/questions/8566090/delay-hover-in-css3. This will probably solve your problem. — Hkidd, Sep 15 '15 at 17:30
In order for `transition-delay` to work you need to define the `transition` (and browser specific equivalents) for `filter` (and browser specific equivalents), or, as I did in the answer, use the generic `all`. — tao, Sep 15 '15 at 17:35

tao · Accepted Answer · 2015-09-15T17:55:43.950

What you need is transition-delay:

.image2 {
    -webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    transition: all .4s ease;
    -webkit-transition-delay: 3s;
    transition-delay: 3s;
}

It's quite simple, really: when a certain CSS property of an element changes, before applying the change browsers will check if there is any transition set for that particular CSS property. If there is one, the browser will check for transition-delay. But if no transition is set, there is nothing to delay, so transition-delay is useless.

In the above example, the transition itself is set to 0.4 seconds and it will start at 3 seconds after you hover (but beware that you need to hover the element for 3 seconds, otherwise the transition gets canceled).

I added a transition-delay of 3 seconds to the classic filter example to get a feel of how it all behaves.

thanks a lot for the answer but yet doesn't work. I probably do something wrong but i tried adding and changing the values several times and still nothing. mersi frumos de raspuns oricum :) o sa mai incerc sa vad ce reusesc :D — smobx, Sep 15 '15 at 21:50
Make a codepen or jsfiddle with it and I'll take a look. There's something else that's interfering with it. It should work. As you can see, it does in my example. — tao, Sep 15 '15 at 21:58

Css hover delay (filter)

1 Answers1