How to use CSS Blend Modes In CSS
- 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.
<!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.w3wiki.org/wp-content/uploads/20210915115837/gfg3-300x300.png">
<div class="filter-overlay"></div>
</div>
<div class="image">
<img alt="Gfg 2" src=
"https://media.w3wiki.org/wp-content/uploads/20210915115837/gfg3-300x300.png">
<div class="filter-overlay"></div>
</div>
<div class="image">
<img alt="Gfg 3" src=
"https://media.w3wiki.org/wp-content/uploads/20210915115837/gfg3-300x300.png">
<div class="filter-overlay"></div>
</div>
</div>
</body>
</html>
.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:
How to Add Filter Effects to Images ?
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
- Using SVG Filters
- Using CSS Blend Modes
Contact Us