How to add visual effects to images with CSS?
The visual effect adds special effects to the image. The image can be added with effects like blurring the image, inverting the color of the image, or converting the color of the image to greyscale. The visual effects can be added with CSS property.
To add the visual effect to images, add the CSS filter property to the images. The filter property has different values which can be used to add visual effects to the image. Here is the list of some popular filters which can be used to add visual effects to the images.
| Filter |
Description |
| none |
It does not add any effects. |
| blur(px) |
Applies blur effect to the image. It will be determined with px value. |
| brightness(%) |
It customizes the brightness of the image. It is specified with a percentage value. The more the percentage value the brighter will be the image. |
| contrast(%) |
It adds contrast to the image. The more the percentage value, the more will be the contrast of the image. |
| sepia(%) |
converts the image to sepia |
| grayscale(%) |
converts the image to grayscale. |
| invert(%) |
inverts the color of the image |
Example: Adding a visual effect to the image
In this example, we have added the visual effect to the image using the above value of the filter property.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
<style>
.grayscale {
filter: grayscale(100%);
}
img {
width: 200px;
}
.invert {
filter: invert(100%);
}
.contrast {
filter: contrast(80%);
}
.brightness {
filter: brightness(30%);
}
.sepia {
filter: sepia(60%);
}
.blur {
filter: blur(5px);
}
</style>
</head>
<body>
<div class="container">
<h2> Visual effects of image </h2>
<img src="https://s3.ap-south-1.amazonaws.com/s3.studytonight.com/tutorials/uploads/pictures/1628231120-.jpeg" alt="img1" class="grayscale">
<img src="https://s3.ap-south-1.amazonaws.com/s3.studytonight.com/tutorials/uploads/pictures/1628231120-.jpeg" alt="img1" class="invert">
<img src="https://s3.ap-south-1.amazonaws.com/s3.studytonight.com/tutorials/uploads/pictures/1628231120-.jpeg" alt="img1" class="contrast">
<img src="https://s3.ap-south-1.amazonaws.com/s3.studytonight.com/tutorials/uploads/pictures/1628231120-.jpeg" alt="img1" class="brightness">
<img src="https://s3.ap-south-1.amazonaws.com/s3.studytonight.com/tutorials/uploads/pictures/1628231120-.jpeg" alt="img1" class="sepia">
<img src="https://s3.ap-south-1.amazonaws.com/s3.studytonight.com/tutorials/uploads/pictures/1628231120-.jpeg" alt="img1" class="blur">
</div>
</body>
</html>
Output
Here is the output of the above program.
Example: Adding multiple effects to the image
We can also add multiple effects to the single image. separate the value with space to add multiple filters. The filter is used under :hover pseudo-class. so place the cursor over the image to see the effects.
Conclusion
In this tutorial, we have learned to add visual effects to the images with CSS. We can do so using the filter property. There are various types of effects that can b added to the image. We can also add multiple effects to the same image.
