Design comparison
Solution retrospective
Hi Guys! Another component I've been finished. Please let me know if there is something wrong with my code. TIA
Community feedback
- @correlucasPosted about 2 years ago
πΎHello @CodeWithSubaru, congratulations for your new solution!
Your component is great, you can improve it by replacing the main div with a semantic tag, this case you can use
<main>
or<article>
. To make the container and the image responsive you need tomax-width: 100%
in place ofwidth
to allow the container to contract, also useobject-fit: cover
to make the image crop while scaling with the container.You need to use
mix-blend-mode
to make this color blend between the image and the background-color of the column blending image and color. See the steps below to apply to theimg
orpicture
selector:img { mix-blend-mode: multiply; opacity: 75%;}
π I hope this helps you and happy coding!
Marked as helpful1@CodeWithSubaruPosted about 2 years ago@correlucas Thank you for your wonderful feedback sir!
0 - @Dumont19Posted about 2 years ago
Great solution. If you don't mind, there is an improvement that can be made.
To let the image with the overlay effect, you can use the mix-blend-mode property of css with the multiply value and add the filter property or some other that arrives at a similar result.
Another thing, your solution is not adapted to the screen of smaller devices such as smartphones.
Marked as helpful1@CodeWithSubaruPosted about 2 years ago@Dumont19 Thank you for your feedback sir!
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