Applying CSS Filter Effects
We have applied the filter property in CSS to create visual effects on the image, such as grayscale, blur, and brightness, which activate on hover.
Example: The below example uses CSS Filter Effects to add visual effects to images using CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 20px;
}
h1 {
color: green;
}
.image-container img {
width: 300px;
transition: 0.5s;
}
.image-container img:hover {
filter: grayscale(100%) blur(2px) brightness(1.2);
}
</style>
</head>
<body>
<h1>w3wiki</h1>
<h3>Applying CSS Filter Effects</h3>
<div class="image-container">
<img src=
"https://media.w3wiki.org/wp-content/uploads/20240305215328/gfglogo.png"
alt="w3wiki Logo">
</div>
</body>
</html>
Output:
How to Add Visual Effects to Images using CSS?
CSS is most useful for adding visual effects to images, enhancing the overall user experience. By using CSS properties like filter, transform, and transition, you can create dynamic and engaging effects that respond to user interactions. In this article, we will explore examples showcasing the visual effects of images using CSS.
These are the following methods:
Table of Content
- Applying CSS Filter Effects
- Applying CSS Transform and Transition Effects