So in this movie, we're gonna talk about invert function in CSUs image filters, which allows you to invert the sample in the image. So here's a demo, this is the original image. And if I apply 50% of the node, that it will going to make it look like this kind of a blackish desert, a darker desert. But if I apply 100% in worden, it will go to totally invert that image. So you see it right here. Well, this is a very simple image filter function, but before digging into code, let me tell you that what kind of value you can pass as a parameter in this invert function.
So here we go. This is our inverse function and you can pass number or percentage value as a parameter in this invert function. So let me go to my quatre where I'll show you this invert function in action. So here I want my quatre and this is the last two images begin our work on which have a class of image to an image tree living this filter a CSS Let me just target this image too fast. So it's going to be a filter. And then we're gonna make use of this invert function.
Now what happens if I don't pass any value in this invert function? Well, by default, it's hundred percent. What it means, well, it means that it will go into invert the image, yes, it was going to totally invert the image. Let me show you. If I just go here, you see, this second image is totally inverted, because hundred percent is a default value. And if we just keep it zero percent, well, that's represent the original image, Gina percent will represent the original image, and 100% within the present the inverted image.
So let me just go here. Let's look at the present. And now if I just go to this industry, and let me just apply this filter here, it's going to be invert. And now I just leave it off. So now image two is going to be zero percent, which is going to be the original image. And this image tree, which is actually going to fully inverted Actually, let me just pass it 100% right.
That'll be Great. So if I just go here, you see that this is zero percent, and this is 100% inverted. Again, if you want to play with this a number, you can say this make it let's say 10% inverted. And if I go here, you see that this image is actually 10% inverted, but let me just actually invert it even more, so he can see it clearly. So let's make it 30%. And that will Yeah, there we go.
Now you can see, so this is 30% inverted, and this is 100% inverted. And just like other function, you can pass to kind of value as a parameter, the percent and the number. So 30% is a percent, but if you want to pass the exact number, it's going to be 0.3, which is 30%. And this is 100%. So let's make it one, right, and this is the number let me just go here and you will see the exact same result as the previous one. Okay, so zero percent is the original image and the hundred percent is totally inverted result.
And 100% is binary Default and just like other functions, it is do not accept any negative value. So if I just put it here minus, well, it will not going to put any effect, it will simply revert back to its original okay. So this function also do not accept any negative value. So yeah, this is how you can use this invert function to modify your images using invert function in CSS image filters.