CODEWITHSUNDEEP
csshovercss-transitionstransform
Eduardo Araújo
Eduardo Araújo

Reputation: 97

Hover transform transition not workin

So i have this image and i want to increase the saturation of it when hoovering.

This is the class of the image:

.trans {
    -webkit-filter: saturate(70%);
  -webkit-transition: saturate 2s ease;
     -moz-transition: saturate 2s ease;
       -o-transition: saturate 2s ease;
      -ms-transition: saturate 2s ease;
          transition: saturate 2s ease;
}

.trans:hover {
  -webkit-filter: saturate(190%);

}

The hoover is working and the saturation is increased, but the transition is instant and doesn't take the 2 seconds (or other value that i put). I've noticed that in this website i tried another hover effect (blur an image) and i have the same problem.

What can i do?

Upvotes: 0

Views: 53

Answers (1)

hberg
hberg

Reputation: 535

I believe you need to use "filter" or "-webkit-filter" as the target of the transition, e.g.

.trans {
    -webkit-transition: -webkit-filter 2s ease;
    transition: -webkit-filter 2s ease;
}

Upvotes: 2

Related Questions