Vanilla JS/CSS

Hi! Great work out there! In my experience, I have use the CSS properties (mix-blend-mode: multiply;) or (background-blend-mode: multiply;) to be helpful in matching the color of the image overlay to the design reference. However, I notice you're using the image as a background-image and the background-blend-mode is the one that suits it best. That's all! Keep up the good work and happy coding!

.card-image {

background: var(--soft-violet) url(images/image-header-desktop.jpg) no-repeat;

background-size: cover;

opacity: 0.8; // you can adjust

background-blend-mode: multiply;

width: 550px;

height: auto;

}