Design comparison
SolutionDesign
Solution retrospective
not able to add color to the image if anyone knows the easiest way kindly guide me
Community feedback
- @hitmorecodePosted about 1 year ago
You can fix the overlay like this
- You can use a pseudo class to create the overlay (see below)
.second{ width: 50%; height: 100%; position: relative; /* this is necessary to position the overlay using pseudo class */ } ## add this to your css .second::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: hsla(277, 67%, 61%, .8); /* you can adjust the opacity using the alpha channel or add opacity separately */ mix-blend-mode: multiply; /* use this to merge the overlay with the image */ } .img{ width: 100%; height: 100%; background-image: url("./images/image-header-desktop.jpg"); background-color: hsl(277, 64%, 61%); background-repeat: no-repeat; background-size: cover; border-top-right-radius: 15px; border-bottom-right-radius: 15px; }
Marked as helpful0@syyedmuhammadabdullahPosted about 1 year agothanks for the help works perfectly fine@hitmorecode
0 - @YoungZVPosted about 1 year ago
Congrats on your solution.
I solve this problem by adding opacity: .5 to my img and the img container colour is soft violet.
Hope you find this answer helpful
Regards, YoungZeeZee
1
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