Landing page using FlexBox

Community feedback

• 

  yishak abrham•2,150

  @yishak621Posted about 2 years ago

  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%); 
   }
  

  Marked as helpful

  0
• 

  Dusan Brankov•860

  @dusan-bPosted about 2 years ago

  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 :).

  Marked as helpful

  0