So in this movie, we're going to talk about brightness function in CSS image filters, which allows you to adjust the brightness of the image. So here's a demo. This is the original image, which have hundred percent brightness. And 100% is the default value of this brightness function. But what happened if you go beyond hundred percent or over 100%? Well, it will going to give you a brighter result.
So here's a demo. This is 150% brighter than the original one. So this is 100%. And this is 150%. Now what happens if you go below 100%? Well, it will go in to give you blackard result.
Now in this case, this is so this has zero percent brightness, this is 100% 150%. And this have zero percent brightness, which obviously give you a full black result. Well, I'll show you this brightness function in action in a bit. But first, let me show you that what kind of value as a parameter, this brightest from Except so here's the brightness function. And you can pass the number or percentage value as a parameter in this brightness function. So now let me just go to my quatre where I show you this brightness function in action.
So here I am on my equator. And we are going to work on these last two images, which have a class of image to an image three. And let me just go to this filter CSS, and we have this image to class and image three. So let me just target this image to, and here, I'm gonna use this filter property. And in this case, I want to make use of this brightness function. So what happens if I don't pass any value here?
Well, it will automatically going to assume that you want the current image brightness to be 100% which is the original. So the original image will remain unchanged. Let me show you. So you see this second image remain unchanged, because this has 100% brightness level preview. So if I just target this industry, and again if I make use of this filter property, and then this brightness or function and if I pass it on percent. Well, again, you will not see any changes.
Because again, this is 100% brightness. So this original image has 100% brightness, I passed your brightness function, but I didn't pass any value. So it will automatically going to assume that you want hundred percent, which obviously remain unchanged. And in 30 days, I'm seeing specifically that I want 100% brightness, which is obviously going to remain the original one. So what happens if you go below 100%? Well, obviously, as below you go, you will go in to get as blacker desert let me show you.
So let's say I'll go with that 50% So what do you think is gonna happen? Well, you're gonna see the blacker result you see this the darker lizard is it looked like this. But what happened if you go Judo percent? Well, it will go to completely black it out. You see, this is completely black. So if you go below hundred percent, you will go to get blacker or a darker result.
But what happened if you go above hundred percent or beyond hundred percent Well, you're going to get brighter result. So let me show you, if I go here, and I'm gonna say here 150% if I save it, you will see that now, this is a is brighter than the original image. And if I just make this 30 minutes to be 200%, it is going to be brighter than all the images, which is first and two. So, this is 100% 150 and 200% brighter. So, if you go below 100%, you will get darker result, if you go above 100% you will get brighter result and let me tell you that you can pass a decimal number or number and a percent value as a parameter. So in this case, we are working with percent, but now you can also pass decimal number.
So let me show you this is 150%. So now what you can do, you can simply say 1.5, which is 150%. And if I go here, again, you see this is 150%. So let me just prove you that someone say here one and then it's going To be five and you will see the second and third image exactly same. See, exactly same, because we are passing the exact same value, but the type is different, this is number and this is percent, okay? So if you want 20% just make it two, and this is going to be doing 2%.
So let's make it 200% if I save it, if I go here, you will see this second and third is exactly same. And let me just tell you that this bracket is function do not accept negative values. So if you just you know, try to pass in a negative value, Well, you see, this second image reverted back to its original because this practice function to not accept any negative value. Okay, so let me just make this 1.5 and if I go here, there we go. Hundred percent, 140 percent and 200%. So this is how you can adjust the brightness of your image using brightness function in CSS image filters.