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

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾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!

  Marked as helpful

  1