Adding a color over an image

How can I add a color over an image, like in the picture, where this violet color appears over it. I embedded the image in HTML under <picture> tag.
No description
3 Replies
Rianẍa
Rianẍa11mo ago
You can use a blend mode. An example:
<figure class="color-overlay">
<img src=#>
</figure>
<figure class="color-overlay">
<img src=#>
</figure>
.color-overlay {
background-color: purple;
}

.color-overlay img {
mix-blend-mode: multiply;
/* You can choose other blend modes if you want. Just try en see what you want */
}
.color-overlay {
background-color: purple;
}

.color-overlay img {
mix-blend-mode: multiply;
/* You can choose other blend modes if you want. Just try en see what you want */
}
Hope this is what you want 😉
David
David11mo ago
@SurfDiamer this is working perfectly, thank you a lot! I didn't know about this property, I know about background-blend-mode but I guess it only works with background-image set
Rianẍa
Rianẍa11mo ago
the background-blend-mode is indeed only when you use background-image 😉
Want results from more Discord servers?
Add your server