Mobile-first solution using Flexbox

Community feedback

• 

  Arshad Ali Kaldane•650

  @IamArshadAliPosted 12 months ago

  Hello there! 👋

  Congratulations on completing your first challenge on Frontend Mentor. 🎉

  As for your question, I suggest the following change:

  • use mix-blend-mode: multiply on .img to get the desired tint

  I hope this resolves your question.

  Good Luck with upcoming Challenges. 👍

  Happy Coding! 🤓

  Marked as helpful

  1

  ---

  

  Macury•40

  @MacuryPosted 12 months ago

  Perfect!! thanks a lot @IamArshadAli

  1
• 

  Paras Sharma•700

  @imparassharmaPosted 12 months ago

  add image give it z-index 0....then create a new div same to the size of the image...and give it z-index 1 ...position it absolute so you can put it on the image div.....give background-color property in the new div which is on top of the image div and reduce its opacity by giving property opacity:0.5 ....it should work

  Marked as helpful

  1

  ---

  

  Macury•40

  @MacuryPosted 12 months ago

  I still cant get the same tint @imparassharma

  0

  

  Paras Sharma•700

  @imparassharmaPosted 12 months ago

  @Macury I think you are reducing opacity of image but image opacity should remain...the overlay div's opacity should reduce....but no worries it looks good as they have not provided the tint color in style-guide ..

  1