So in this movie, we're gonna talk about opacity function in CSS image filters, which allows you to set the opacity level for the image. So here's the demo. This is the original image, which have 100% opacity, which is by default, but if you go lower, like a 50% opacity, then it will look like this. If you go even lower, which is 10%, it will look like this. But if you go Judo percent capacity, then the image will completely disappear from the screen. So by now, you might be thinking that what is the difference between this capacity function and the Opacity property that we already using for more than a decade, which is more established and well adopted?

So what's the difference between opacity property and opacity function will get exactly the same except one simple difference. And the difference is that with the filters means opacity function. Some browsers provide a hardware explanation for the better question. So if you use opacity function or opacity property, some browsers, we will going to use a hardware acceleration for that, which will result, the better and smoother performance. And you can pass number or percent value as a parameter in this opacity function. So let me go to my quatre where I'll show you this opacity function in action.

So here I am on my equator. And we're going to work on this last two images, which have a class of image to an image three, go to Phaedra CSS, and let's modify this image to so here I'm going to use this filter property. And in this case, I'm going to make use of this opacity function. So now what happens if I don't pass any value? Well, by default, it's 100%. It means that if I did not pass any value, then our image will remain unchanged.

Let me show you. If I go here, you see, there's no effect on this image. Well, that's because it's already have hundred percent opacity. If you go below hundred percent, then it will going to decrease its opacity. Okay, so let me just do here. Let me just copy this one and save some time and paste it right here and purpose it hundred percent.

You see no difference, it is exactly the same. So if I go here, you see that this industry look like others, right. So this is no difference. So let me just go here, and let me just make it a 50%. So now if I see here 50% opacity, now it is actually going to decrease this capacity see, is 50% opacity. And what happened if I just make it 10%.

So let me just get rid of this one zero, not 10%. If I go here, now you see this have a 10% opacity. But as soon as I make it easy to present, when the image is going to be completely disappear from the screen, you see, it's gone. Again just like majority of the function, you can pass value as a number or percentage. In this case, this is a percent but if you want to go for number Well 50% is going to be 0.5. If I could hear you see a second look at this art you want 10% Well, it is going to look like Like this says gonna be 0.1.

And there we go, if we go here, now, this is a 10% capacity. And just like other functions, this do not accept a negative value. So if I pass a negative value that now it's revert back to its original. So the positive filter is not applying on this image, because I use this invalid argument, which is minus or negative symbol. So let me just get rid of it. Now.

There's also one property, that name is opacity, right? And if I make it a 0.5, which is obviously the 50%. If I just comment it out, actually, they will look same. Let me show you. You see, this looks same. So what is the difference between this opacity property and in this opacity function?

Well, again, if you use this opacity function, then sometimes that will go into provide hardware acceleration for smooth result. So if you're working with images, go with this filter opacity function. It will go into use that hardware explanation and give you a small Image drawing on your screen. So yeah, this is how you can set the opacity of the image using opacity function in CSS image filters.