Tips for implementing multiple CSS image filters with jQuery

Question

Can you show me how to use jQuery to apply the CSS code below?

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

I attempted this method already, but it didn't have any effect.

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

Answer 1

Answer №1

Try this simple filter method:

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

jQuery takes care of adding necessary prefixes.

Answer 2

Try this simple filter method:

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

jQuery takes care of adding necessary prefixes.

Answer 3

Instead of using filter(), try utilizing WebkitFilter:

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

Answer 4

Instead of using filter(), try utilizing WebkitFilter:

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

Answer 5

Consider defining CSS styles as a separate class

.image-center
{
   -webkit-filter: sepia(50%) saturate(200%) hue-rotate(220deg);
}

Next, in jQuery:

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

By following this approach, you maintain a clear separation between JavaScript and styling.

Answer 6

Consider defining CSS styles as a separate class

.image-center
{
   -webkit-filter: sepia(50%) saturate(200%) hue-rotate(220deg);
}

Next, in jQuery:

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

By following this approach, you maintain a clear separation between JavaScript and styling.