Landing page using FlexBox

U should add an psudoelement like these to create overlay image..u should position the picture relatively and the after element absolutely

.container picture { 
   position: relative; 
   overflow: hidden; 
 } 
 .container picture::after { 
   content: ""; 
   display: block; 
   width: 100%; 
   height: 100%; 
   background-color: hsl(277deg, 64%, 61%); 
   position: absolute; 
   top: 0; 
   left: 0; 
   opacity: 0.45; 
   filter: brightness(80%); 
   filter: contrast(180%); 
 }

Hello mttmene,

you can add the color overlay with transparency on the container of the image:

.image {
  background-color: hsla(277, 64%, 61%, 0.5);
}

And then place the image behind the container:

.image > img {
  position: relative;
  z-index: -1;
}

There are definitely various solutions that lead to the same result. This is a solution that came to my mind spontaneously.

Hope this helps. Keep it up, and happy coding :).