HTML CSS Flexbox

One thing you can try is by using a pseudo-element. Add position: relative; to the div that contains the image, then add this CSS:

.image::before {
    content: '';
    inset: 0;
    position: absolute;
    background-color: purple;
    opacity: 0.5;
}

Change the background color to the color you wish to use and play around with the opacity. Don't know if this is the best solution, but it's the first thing I would try. Hope this helps.

use div , b-image and b-color and then use background-blend-mode as soft-light.... in this one of way to do that

Hey Gavin, Let's try set your image in backgroud-image. Then, you should add a div inside, and css for that div maybe is: { height: 100%; background-color: rgb(98 9 154); opacity: 0.5; }