Home »
CSS
How to add visual effects to images with CSS?
Learn, how can we add visual effects to images with CSS?
Submitted by Apurva Mathur, on August 03, 2022
Appearance is one of the most important aspects of a website. Visual appeal is what meets the eye. It's the colors, shapes, pictures, fonts, white space, and overall visual balance of a design. Whether a website appeal to us affects how we perceive it, how we use it, and how we remember it.
Appearance says a lot about your website that is the one thing that attracts the attention of the audience. This is key to getting visitors engaged with your website. We like to look at pretty things and if we have the choice, we always prefer an attractive design or image over an ugly or neutral one.
Adding visual effects to a normal image can also attract the audience, if used correctly and we can easily add visual effects to any image using the filter property, filter property has many values, and one of the values is inverted. Invert is reversing the color of an image or video. When referring to an image, this is often called a negative. This value adds visual effects to the images.
Syntax:
filter:invert (value %)
The maximum value of this property is 100%; this will perfectly add visual effects to an image. You can reduce the value and see the changes accordingly.
HTML and CSS code to add visual effects to images
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
img{
margin: 20px;
}
.normal{
width: 600px;
height: 500px;
}
img.invert {
width: 600px;
height: 500px;
filter:invert(100%);
}
</style>
</head>
<body>
<span>
<center>
<h1>Orignal Image VS Invert filter property</h1>
</center>
<img class="normal" src="https://images.pexels.com/photos/47547/squirrel-animal-cute-rodents-47547.jpeg?cs=srgb&dl=pexels-pixabay-47547.jpg&fm=jpg">
<img class="invert" src="https://images.pexels.com/photos/47547/squirrel-animal-cute-rodents-47547.jpeg?cs=srgb&dl=pexels-pixabay-47547.jpg&fm=jpg">
</span>
</body>
</html>
Output:
CSS Tutorial & Examples »