Filters in CSS3

 Filters in CSS3

CSS3 provides several filter functions that you can use to modify the appearance of elements on your web page. These filters can be used to create visual effects like blurring, brightness, and contrast adjustments.

html

<div class="image-container">

  <img src="example.jpg" alt="Example Image">

</div>

css

.image-container {

  filter: grayscale(100%);

}

.image-container:hover {

  filter: none;

}

In this example, we have created an image container with a grayscale filter applied to it. When the user hovers over the image container, the filter is removed and the original color image is displayed. This creates a simple hover effect.