How to use CSS filters in JavaScript?

Question

I would like to use CSS filters in JavaScript.

Example of CSS filters:

.filter {
    -webkit-filter: blur(20px); /* Blur filter */
    -webkit-filter: invert(1); /* Invert filter */
    -webkit-filter: hue-rotate(100deg); /* Rotate Hue */
    ...
}

For example, how can I make a blurred image using JavaScript?

<img id="image" onmouseover="ImageHover();" src="source.png"/>

while

function ImageHover() {
    document.getElementById('image').??????='???'
}

I hope you guys understand what I want.

In addition to Ahmed's answer I'd strong advise against inline scripting whenever possible. — Carl Edwards
– Carl Edwards, Commented Jul 25, 2015 at 2:49

Ahmed Eid · Accepted Answer · 2015-07-25 00:54:16Z

0

I recommend using this so the function can be used with any element/Img you want later

<img id="image" onmouseover="ImageHover(this);" src="source.png"/>

function ImageHover(el){
    el.classList.add("filter");
};

answered Jul 25, 2015 at 0:54

Ahmed Eid

1,1838 silver badges9 bronze badges

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

4 Comments

Ahmed Eid Over a year ago

you didn't declare the handler of onmouseout ,, so nothing goes back to it's normal state

t4dohx Over a year ago

yes I know, but the function doesnt blur the image, or you see the blur of image?

Ahmed Eid Over a year ago

I have updated the fiddle : jsfiddle.net/kn9h02a5/1 the problem was that you added the class like the way you added an inline style ,, I've fixed this by addung new css rule and added the class to the class list of that element

t4dohx Over a year ago

Thank you :) Just exactly what I wanted.

Ted · Accepted Answer · 2015-07-25 00:46:50Z

0

You need to give use to that element's property, as such:

var image = document.getElementById('image');
image.style.webkitFilter = "blur(20px);";

or

image.style["-webkit-filter"] = "blur(20px);";

answered Jul 25, 2015 at 0:46

Ted

5704 silver badges23 bronze badges

Comments

user20177286 · Accepted Answer · 2022-10-06 15:45:42Z

-1

var photo = document.getElementById('yourId');

function sepia(){
    photo.style.filter = "sepia(100%)";
}

answered Oct 6, 2022 at 15:45

user20177286

1

Collectives™ on Stack Overflow

How to use CSS filters in JavaScript?

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related