Adding filter effects to images can make images more enhanced on your website. Filter effects can be started from simple adjustments like brightness and contrast to more complex effects like blur, color overlays, and many more.
The below approaches can be used to add filter effect to images:
Table of Content
Using CSS Filters
- In the CSS, filters allow you to apply various effects directly to HTML elements, like images, paragraphs, and many more elements.
- You can use the filter property to apply one or more filter functions, such as blur, brightness, contrast, grayscale, hue-rotate, invert, saturate, and sepia. These filters can be applied directly to an image or to a container element that holds the image.
- To use CSS filters on an image, you can apply a filter function to the filter property in your CSS.
- CSS filters on an image, you can apply a filter function to the filter property in your CSS.
Example: The below code implements CSS filters to add filter effects to an image.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>
CSS Filter Effects Example
</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="image-container">
<img alt="GFG Image" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210915115837/gfg3-300x300.png"
id="gfg-image">
</div>
</body>
</html>
CSS
.image-container {
width: 300px;
margin: 20px auto;
text-align: center;
}
img {
width: 100%;
height: auto;
border-radius: 10px;
transition: filter 0.3s ease;
}
img:hover {
filter: grayscale(100%);
}
Output:
Using SVG Filters
- SVG (Scalable Vector Graphics) filters provide a more easier and flexible way to apply filter effects to images or other HTML elements.
- SVG filters are defined in an <svg> element with <filter> elements inside. These filters can be composed of various primitive filters, such as <feGaussianBlur>, <feColorMatrix>, <feComposite>, and more.
- To use SVG filters, you need to define a filter in an SVG element, and then apply it to an image using the filter attribute.
Example: The below code uses SVG filters to add a filter effect to the images.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>
CSS SVG Effects Example
</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="image-container">
<img alt="GFG Image" id="gfg-image" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210915115837/gfg3-300x300.png">
</div>
<svg width="0" height="0">
<filter id="blur" x="-50%" y="-50%"
width="200%" height="200%">
<feGaussianBlur in="SourceGraphic" stdDeviation="5" />
</filter>
</svg>
<script>
const image =
document.getElementById('gfg-image');
image.style.filter = "url(#blur)";
</script>
</body>
</html>
CSS
.image-container {
width: 300px;
margin: 20px auto;
text-align: center;
}
img {
width: 100%;
height: auto;
border-radius: 10px;
transition: filter 0.3s ease;
}
img:hover {
filter: grayscale(100%);
}
Output:
Using CSS Blend Modes
- In the CSS, blend modes allow you to blend an image with underlying or overlapping content.
- Different blend modes create different visual effects like darkening, lightening, adjusting hue, etc. Use the mix-blend-mode property on the image element to specify the blend mode you want to apply.
- By adjusting the blend modes, background colors, and additional CSS properties, you can create various interesting filter effects for your images.
Example: The below code implements CSS blend modes to add filter effects to the images.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>
CSS BlendMode Effects Example
</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="image">
<img alt="Gfg 1" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210915115837/gfg3-300x300.png">
<div class="filter-overlay"></div>
</div>
<div class="image">
<img alt="Gfg 2" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210915115837/gfg3-300x300.png">
<div class="filter-overlay"></div>
</div>
<div class="image">
<img alt="Gfg 3" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210915115837/gfg3-300x300.png">
<div class="filter-overlay"></div>
</div>
</div>
</body>
</html>
CSS
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 20px;
}
.image {
width: 300px;
height: 200px;
overflow: hidden;
position: relative;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease-in-out;
}
.image:hover {
transform: scale(1.05);
}
.image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: filter 0.3s ease-in-out;
}
.image:hover img {
filter:
grayscale(100%) contrast(150%)
brightness(80%);
}
.filter-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
mix-blend-mode: overlay;
transition: opacity 0.3s ease-in-out;
pointer-events: none;
}
.image:hover .filter-overlay {
opacity: 0;
}
Output:
blend-modes