loopstudios-landing-page-main

You will have to use css filters to do that. Also, work on the link pointing to we’re you hosted your code cause it currently throws 404 error code.

Hi 👋

Changing the color was definetely a challenge for me too.

To do this, your img tag needs to be in a div with the purple background color. Meaning that the layer behind your image needs to hold the purple color.

In the HTML, you would have:

<div class="stats-card__hero-img">
<img src="path/to/image" alt="">
</div>

And in your CSS file, you would:

• apply the purple background color to the div.
• and for the img, you need to use mix-blend-mode: multiply with 0.75 opacity.

For more details, checkout my code here on Github.

And for more information on CSS blend modes, I found this article very helpful: getflywheel.com/layout/css-blend-modes/

Happy Sunday and happy coding!