Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS grayscale with animation

i have some css for changing my image into grayscale (with some svg for firefox)

img.grayscale{
            filter: grayscale(100%);
            -webkit-filter: grayscale(100%); 
            -moz-filter: grayscale(100%);
            -ms-filter: grayscale(100%); 
            -o-filter: grayscale(100%);
            filter: url(desaturate.svg#greyscale);
            filter: gray;
            -webkit-filter: grayscale(1);
        }

but now i want animation on hover for changing the value of the grayscale to 0.

I have this code but it doesn't do anything (on chrome of course), i have no idea why it doesn't animate at all.

<script type="text/javascript">
        $(".grayscale").hover(
            function () {
                $(this).animate({
                    '-webkit-filter': 'grayscale('0'%)'
                }, 300);
            }
        );
    </script>

I think it's possible to animate the % from 100% to 0%, isn't it?

Edit : i'm trying to do for all browsers, not only chrome but i do my tests on chrome that's why i'm not changing all the properties. I think when i'll found the answer for chrome i'll can do the same for the other browers :)

like image 438
user1660309 Avatar asked Sep 10 '12 13:09

user1660309


People also ask

How do I make grayscale in CSS?

0% (0) is default and represents the original image. 100% will make the image completely gray (used for black and white images).

How do I change a color image to black and white in CSS?

By specifying grayscale value to the filter property of CSS we can create a black and white image. filter property can be used to apply special effects like blur, drop-shadow to images.

What is filter grayscale?

grayscale()Converts an element's color to a shade of gray, for use by the filter property. A decimal value between 0 and 1 or percentage up to 100% controls the extent of the gray effect. This CSS property value is reflected in the following image: filter: grayscale(1); filter: grayscale(100%); /* same */

How do I color an image in CSS?

We can change the color of PNG image using following CSS styles: filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url() | initial | inherit; The above property is used to set the visual effect of the image.


2 Answers

Why use animate() at all? You're already only animating for webkit, so why not use the transition property and classes to trigger the animation? Like this:

img {
  -webkit-transition: all 300ms;
}

img.grayscale {
  -webkit-filter: grayscale(1);
}

And then just remove the class by calling

$('img.grayscale').removeClass('grayscale');

Note: I don't know what the specific property is to just animate just the grayscale, but if you're not doing any other transitions on the element, transitioning "all" works just fine.

like image 199
wavetree Avatar answered Oct 08 '22 15:10

wavetree


You may use my silly function. But it works :)

HTML;

<img src ="http://upload.wikimedia.org/wikipedia/en/6/62/American_McGee_Alice_box.gif" border="0" class="ongray" />

CSS;

img {-webkit-transition:-webkit-filter 0.3s ease-in-out;}
.g {-webkit-filter: grayscale(1);}

JS;

$(".ongray").hover(
    function(){$(this).addClass("g")},
    function(){$(this).removeClass("g");}
);

http://jsfiddle.net/kEC92/3/

like image 37
siniradam Avatar answered Oct 08 '22 15:10

siniradam