Stats Preview Card

You can fix the overlay like this

• You can use a pseudo class to create the overlay (see below)

.second{
    width: 50%;
    height: 100%;
    position: relative; /* this is necessary to position the overlay using pseudo class */
}

## add this to your css
.second::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: hsla(277, 67%, 61%, .8); /* you can adjust the opacity using the alpha channel or add opacity separately  */
    mix-blend-mode: multiply; /* use this to merge the overlay with the image */
}

.img{
    width: 100%;
    height: 100%;
   background-image: url("./images/image-header-desktop.jpg");
   background-color: hsl(277, 64%, 61%);
   background-repeat: no-repeat;
   background-size: cover;
   border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
}

Congrats on your solution.

I solve this problem by adding opacity: .5 to my img and the img container colour is soft violet.

Hope you find this answer helpful

Regards, YoungZeeZee