how to apply multiple css image filters using jquery

Question

How do I apply the following css code using jquery

#centeredImage
{
   -webkit-filter: grayscale(20%) invert(0) blur(1px); 
}

Already tried this, didn't work

$('#centeredImage').css('-webkit-filter','grayscale(20%) invert(0) blur(1px)');

Bhojendra Rauniyar · Accepted Answer · 2014-03-03 09:08:00Z

3

Just use filter:

$('#centeredImage').css('filter','grayscale(20%) invert(0) blur(1px)');

jQuery automatically set prefixes.

answered Mar 3, 2014 at 9:08

86k36 gold badges179 silver badges241 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

the normal filter tag doesn't work for me at all, not even using css only. I'm using the newest chrome version on fedora..

Felix · Accepted Answer · 2014-03-03 09:12:33Z

2

You can use WebkitFilter instead:

$("#centeredImage").css({
    WebkitFilter: 'grayscale(20%) invert(0) blur(1px)'
})

answered Mar 3, 2014 at 9:12

Felix

38.2k8 gold badges45 silver badges56 bronze badges

Chris Moutray · Accepted Answer · 2014-03-03 09:07:45Z

0

Maybe create css as a class

.centered-image
{
   -webkit-filter: grayscale(20%) invert(0) blur(1px); 
}

Then in jQuery

$('#centeredImage').addClass('centered-image');

At least this way your keeping the separation of javascript and styling...

answered Mar 3, 2014 at 9:07

Chris Moutray

18.4k7 gold badges49 silver badges66 bronze badges