Stats Preview

If you apply these changes it will work, you will see the overlay on the image.

img{
    width:100%;
    height:100%;
    /* these two line were the problem, you can remove them. I just commented them out */
/*     object-fit: cover;
    position: relative; */
}

.right {
    position: relative;
}

.right::after{
    position: absolute;
    content: '';
    background-color: var(--soft-violet);
    mix-blend-mode: multiply; /* add this line */
    opacity: 0.8; /* add this line */
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

Hello, would you like to try this?

img{
    border-top-right-radius: 2%;  
    border-bottom-right-radius: 2%;    
    mix-blend-mode: multiply;
}

Here's more info: https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode

I hope this helps!👍