CODEWITHSUNDEEP
javascriptcssfilter
t4dohx
t4dohx

Reputation: 668

How to use CSS filters in JavaScript?

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.

Upvotes: 1

Views: 1507

Answers (3)

user20177286
user20177286

Reputation: 1

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

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

Upvotes: -1

Ahmed Eid
Ahmed Eid

Reputation: 1183

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");
};

Upvotes: 0

Ted
Ted

Reputation: 570

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

Upvotes: 0

Related Questions