Design comparison
Solution retrospective
I faced many difficulties when trying to make the images responsive. Prior to this project I used background images for images section of the webpage. The problems I faced are as follows:
- The object-fit property didn't work when I used it on large screens but worked when I used it on smaller screens, you can check it in my code. Anyone know why?
- I ended up using flexbox to make the image a flex item and cover the container it was in.
- The purple filter or overlay on the image was tricky to design. After some internet surfing I found many solution but nothing worked. At last I used background color and made the image transparent to get the desired effect. Any other ideas on how to design this?
Community feedback
- @correlucasPosted over 2 years ago
๐พHello Shyam, congratulations for your solution!
Answering your question:
The
object-fit
is working, I've checked the live site, its just that you can see it too much, because when the container starts to scale down, the solution immediately gets themedia query
activated, but if you note before the media query gets active the image gets cropped a little bit.To do the purple overlay on the image all you need to do is apply
mix-blend-mode
in this case with multiply. See the code below:.content-img { mix-blend-mode: multiply; opacity: 0.8;}
Hope it helps and fee free to ask more questions.
Marked as helpful1@ItachidorriPosted about 2 years ago@correlucas Thanks for clearing it out, I understand it a bit now and also thanks for the alternative way to overlay.
1@correlucasPosted about 2 years ago@Itachidorri You're welcome Shyam, then say me if works after you apply the changes.
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
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