Design comparison
Solution retrospective
can anyone tell me how to put colour on a picture like in this design because i was not able to do it properly?
Community feedback
- @correlucasPosted about 2 years ago
πΎHello Yashvir, congratulations for your solution!
I know thats is tricky to apply this overlay effect if you're not familiar to the property that does this change, I knew it only because someone told me here. But there are 3 ways to do that:
1.You can use the div background and the image blending with
opacity
.2.You can use
filter
and play with the contrast and opacity values.3.The best way and easier is using
mix-blend-mode: multiply
and aplying75%
for the opacity.img { mix-blend-mode: multiply; opacity: 0.8;}
Hope it helps bro, keep it up!
0 - @vanzasetiaPosted about 2 years ago
Hi, Yashvir Singh! π
I would recommend fixing the indentation of the HTML. At the moment, it is really hard to understand the HTML. You can install a code formatter like Prettier to automatically do the formatting for you.
Next, I suggest moving all the CSS into a separate file. It may not a big deal since this is just a small project. But, it is a good thing to get into the habit of separating the HTML and CSS. Not only, it makes it easier understand but also, it can potentially make the styling easier to maintain.
After that, try to make the website responsive first. If you don't have any resources to learn responsive web design, then I suggest reading the responsive design guide from MDN.
Finally, you can start improving the site by trying to create the overlay. You can try using
mix-blend-mode
and adjust theopacity
of theimg
to make it looks closer to the design.That's it! Happy coding! π
0@Yashvir821Posted about 2 years ago@vanzasetia Thank you so much it was helpful.
0@vanzasetiaPosted about 2 years ago@Yashvir821 Happy to hear that was helpful! π
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