CODEWITHSUNDEEP
javascriptjquerycss
Gabriel ThaKid
Gabriel ThaKid

Reputation: 887

how to apply multiple css image filters using jquery

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)');

Upvotes: 0

Views: 2059

Answers (3)

Felix
Felix

Reputation: 38102

You can use WebkitFilter instead:

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

Fiddle Demo

Upvotes: 2

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

Just use filter:

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

jQuery automatically set prefixes.

Upvotes: 3

Chris Moutray
Chris Moutray

Reputation: 18379

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...

Upvotes: 0

Related Questions