Any ideas on how to make the main image-tint match?
@IamArshadAli
Posted
Hello there! 👋
Congratulations on completing your first challenge on Frontend Mentor. 🎉
As for your question, I suggest the following change:
mix-blend-mode: multiply on .img to get the desired tintI hope this resolves your question.
Good Luck with upcoming Challenges. 👍
Happy Coding! 🤓
Marked as helpful
@Macury
Posted
Perfect!! thanks a lot @IamArshadAli
@imparassharma
Posted
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
@Macury
Posted
I still cant get the same tint @imparassharma
@imparassharma
Posted
@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 ..
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord
