css Grid

Community feedback

• 

  Fidel Lim•2,775

  @fidellimPosted about 3 years ago

  Hello Al-Baraa, Salam.

  Great work finishing your first FEM project! I hope you'll continue to build more projects here :) Everything seems fine as it works well for desktop and mobile devices. I just have one suggestion regarding the color overlay of the image. You can remove the ::after selector and add the color within the image tag itself. Have a look at this code:

  .container .img {
      background-image: url(images/image-header-desktop.jpg);
      background-color: hsl(277, 64%, 61%);
      background-blend-mode: multiply;
  }
  

  This will solve your issue. The trick here is the background-blend mode. This will enable image and color to mix together. Also, blend-mode: multiply, will make the color darker. Hence, it will look like the design made by FEM. You also don't need to add position: relative to your image class.

  I hope it helps :)

  Marked as helpful

  0

  ---

  

  Al-Baraa Bakri•330

  @Al-Baraa-BakriPosted about 3 years ago

  @fidellim Thank You For This Helpful Feedback :) background-blend-mode more logical Than made overlay By ::after Thanks :)

  1

  

  Fidel Lim•2,775

  @fidellimPosted about 3 years ago

  @Al-Baraa-Bakri No problem!

  0