Turning off the display of img and mix-blend-mode CSS property

👾Hello @chegx, Congratulations on completing this challenge!

🎨 Here are some tips to improve your component design:

Instead of applying the overlay effect like this:

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: hsl(277, 64%, 40%);
    opacity: 0.5;
}

You can use this code shortcut to reach the same color of the challenge. All you need is to use mix-blend-mode to make the color blend between the image and the background-color of the container. See the steps below to apply to the img or picture selector:

img {
mix-blend-mode: multiply;
Opacity

✌️ I hope this helps you and happy coding!