Design comparison
Solution retrospective
difficult to get the transparency thing right without knowing the color
Community feedback
- @afrusselPosted about 3 years ago
There are lot of issues on your work. It's hard to explain line by line. Please take a look of my solution to find out your issues. https://afrussel.github.io/stats-preview-card-component-fm/
Marked as helpful0@nauskiPosted about 3 years ago@afrussel Your css looks much cleaner. It's difficult to select the correct approach, so many things affecting other things.
0 - @tl-lucasestevamPosted about 3 years ago
First, congratulations on building the project! To put the color in the image you can use a
::before
, but first, it's interesting to clean the CSS of the image leaving it like this:.right img { border-top-right-radius: 10px; border-bottom-right-radius: 10px; width: 100%; height: 100%; object-fit: cover; }
The
object-fit: cover
will prevent your image from losing resolution, you can access the MDN documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/object-fitIn this case, the style of the before would look like this:
.right { flex-basis: 50%; margin-right: 0px; position: relative; }
.right.overlay::before { content: ''; height: 100%; width: 100%; position: absolute; top: 0; left: 0; background: hsl(277, 64%, 61%); mix-blend-mode: multiply; z-index: 100; }
Marked as helpful0@nauskiPosted about 3 years ago@tl-lucasestevam Thank you, I got the image showing correctly now.
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