HTML CSS

Hi Luis,

As an alternative option to the overlay approach you could try adding a solid linear-gradient to a background image: background-image: linear-gradient(hsl(277, 64%, 61%), hsl(277, 64%, 61%) ), url(../your/image-filepath);

You would also need to explore background-blend-mode (multiply usually does the trick)

All the best!

You can try using the mix-blend-mode css property to add the accent color to the image. I would suggest wrapping the picture in a div and adding the violet color as a background and then adding mix-blend-mode and opacity to your picture_img class. I tried adding the violet color as a background to your picture class and it worked for desktop but gave a weird effect on mobile which is why I suggested wrapping the picture in a div but you can experiment with it.

.wrapper_div {
    background-color: var(--softviolet);
}

.picture_img {
    ...
   mix-blend-mode: multiply;
   opacity: 0.75; 
   border-radius: 10px 10px 0 0;
}