Design comparison
Solution retrospective
Hello, I'm running into a few problems here, seems like I can't fit my image on the grid-item while on the desktop version. I tried using width, min-width, max-width, height, object-fit, but it won't fit the grid-item. Also i want to ask how can i get a similar violet filter on the image that are in the design folder, should I use a div and set the color to purple, set the size, and opacity like I did in my solution, or is there any other way like using CSS filter or other property thanks!
Community feedback
- @vivekbhatt07Posted almost 2 years ago
For the image color, I just want to add that I used { background-image: url(location of the img); background-color: "voilet color"; background-blend-mode: "try values one by one according to your requirement" } At first, I also used opacity, but it was not looking great. But by using blend mode it looks better than before, but not same as the img in original.
0
Please log in to post a comment
Log in with GitHub
Join 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