When talking about styling web pages, CSS filters are one of the tools that can add attractive effects to elements. One of these filters is brightness(), which allows you to change the brightness of an element. This function is very useful as it enables you to enhance the visibility of an image without needing to modify the original image, making it appear brighter or darker.
Assume you have an image and you want it to be brighter when a user hovers over it to draw attention. By using brightness(), you can easily achieve this effect. It is enough to add a hover event to the target element and increase the brightness value in that state.
To use brightness(), the input value should be a number. A value of 1 means keeping the current brightness. Any value greater than 1 makes the image brighter, while values less than 1 make it darker. It’s that simple!
You can also use this filter in combination with other filters like contrast() or saturate() to achieve more creative results. These powerful tools can help your site appear more lively without the need for editing with image editing software.
For modern browsers, CSS filters are a great accessibility tool, but it’s always essential to ensure that users with older browsers can still access your content. This is why using this tool appropriately is very important.
Now, let’s consider a simple example of how to use the brightness() filter.
<style>
.image {
filter: brightness(0.8);
transition: filter 0.3s ease;
}
.image:hover {
filter: brightness(1.2);
}
</style>
<img src="image.jpg" alt="Example Image" class="image">
Line-by-Line Explanation:
<style> — This tag is used for writing CSS styles..image — This class is defined for the img element.filter: brightness(0.8); — This reduces the default brightness of the image to 80%.transition: filter 0.3s ease; — This applies a smooth transition effect of 0.3 seconds for the filter change..image:hover — The hover state is applied to the image class.filter: brightness(1.2); — In the hover state, the brightness of the image is increased to 120%.</style> — This closes the <style> tag.<img src="image.jpg" alt="Example Image" class="image"> — The img element that displays the example.jpg image and has the image class.