Looking to hire developers?
In the mobile design I've wrapped my images in a <figure> tag and applied a background-color to the tag. The reason is the use of the "mix-blend-mode: multiply" in CSS to the <img> tag to obtain the overlay effect, since the <img> tag will use the parent's container background-color to achieve this effect.
However, you'll notice that the <figure> height is much taller than the actual image, and I get the horizontal pink/purple line.
How to I overcome this?
Thanks in advance!
@KaMazim
Posted
Hi, to make the figure's height fit into the image height you could add the display:flex property in the .flex-item class.
Marked as helpful
@SJ-Nosrat
Posted
@KaMazim
Thanks a lot! That fixed it! Grateful that you went through my code and provided the feedback!
@dadko44
Posted
Hello, your solution looks great. I'm not really in the position to give feedback as I'm still learning a lot of basics but the only thing that I would change would be:
Great work, keep up the good work :)
Marked as helpful
@SJ-Nosrat
Posted
@dadko44
Thank you for taking the time to review my code and make your suggestions.
I did try to give the picture a little less contrast however, I think the mix-blend-mode: multiply; property increases it.
Let me know if the modified version improved it in anyway?
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
