Kevin Powell - Community•12mo ago

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.

3 Replies

Rianẍa•12mo 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 😉

DavidOP•12mo 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•12mo ago

the background-blend-mode is indeed only when you use background-image 😉

Gaming

Programming

Adding a color over an image