Design comparison
Solution retrospective
I learned how to add an overlay element dynamically using the ::after
pseudo-element and position: relative
and position: absolute
instead of using CSS Grid.
The more you know, similar to the NFT Preview Card challenge :)
Community feedback
- @elaineleungPosted about 2 years ago
Hi Juan, great job using a pseudo element here! Instead of anchoring it to the whole component, you can try putting the
position: relative
on the.card__image-header
instead since that is the element that the overlay is being positioned with. In this way, whenever the image is resized, the overlay can be resized with the image and not the entire card.By the way, you can actually make the card more optimal and responsive; right now, if I change the breakpoint and allow the card to be resized, the overlay and also text starts shifting and looking out of place. What I would do is, I'd firstly remove the
min-height
from the pseudo-element and theimg
; instead, I'd change them todisplay: block
so that they would take block properties instead of inline properties, and I'd give the image anobject-fit: cover
so that it won't look distorted when the width changes. I'd then change the breakpoint to something smaller (maybe try 980px) and give some margin/padding around the card so that there's space around it below the breakpoint. Lastly, for centering the whole card, I'd change thealign-items
property toalign-content
. Everything together would look like this:// functions as a normalize rule img, picture { display: block; max-width: 100%; } ... body { align-content: center; } .card__image-header { position: relative; } .card__image-header > img { // remove min-height: 240px; } .card__image-header::after { height: 100%; // remove min-height: 240px; } @media screen and (min-width: 980px) { .card__image-header > img { height: 100%; // this ensures the image height would match the card height object-fit: cover; // remove width: 540px } .card__image-header::after { border-radius: 0 0.625rem 0.625rem 0; } }
Hope this helps you out!
Marked as helpful1@juancaorgPosted about 2 years ago@elaineleung Hi Elaine 👋!
Really appreciate your extensive feedback as always 🙌.
You're totally right about the image distortion when the width changes.
I implemented the 'normalize rule' for the
img
andpicture
element, i.e. usedisplay: block
so that they would take block properties instead of inline properties and theobject-fit: cover
as you suggested. Didn't know about this.This also fixed the issue that I had on having to use fixed heights so the image and overlay wouldn't distort that much, now it's looking much better.
You're right that anchoring the
::after
pseudo element to the whole component wasn't the best thing to do, I was stuck and scratching my head that anchoring it to theimg
wouldn't work. I learned today that::before
and::after
do not work onimg
elements, haha.Didn't think about anchoring to the
picture
element, or in this case.card__image-header
. That works, thanks!I didn't use a breakpoint like 980px or smaller for the desktop version because the component is just too large, and it was working funny using smaller breakpoints. Might as well just use the mobile version for small viewports.
And again, thanks for the centering tip. I changed
align-items
property toalign-content
and it's looking better. I have a question about this, tho.Do you know a way to move my
footer
element to the end of the page with this setup? 🤔When using the
align-content
property, every single element centered vertically just fine, but I can't find a way to move thefooter
to the end of the page. Usingalign-self
doesn't work, only when the parent grid is usingalign-items
.I'm scratching my head with this, I pushed it a little bit using
margin-top
, but doesn't seem optimal 😅Thanks in advance and again, thanks for your excellent feedback!
1@elaineleungPosted about 2 years ago@juancaorg You're welcome, Juan! About your question on pushing the footer to the bottom, you can try using
grid-template-rows: auto min-content
on the body selector and then just remove or comment out thealign-content
line. That's basically setting the height of the rows, whereauto
is for the main content and themin-content
is for the footer. I normally use flexbox on the body selector, so I actually haven't tried using grid for pushing the footer to the bottom until now. Anyway, see whether that's what you're trying to achieve, and if not, let me know and we'll try something else!Marked as helpful1@juancaorgPosted about 2 years ago@elaineleung Thanks for your reply!
I just tested out your tip and it totally works, awesome!
But after you mentioned using flexbox on the body selector, I decided to go with that for simplicity, and using
margin: auto
for centering.I think that is easier to read and understand, getting basically the same result.
Again, really appreciate your help! 🙌
0 - @correlucasPosted about 2 years ago
👾Hello Juanca, congratulations for your new solution!
To make your hero image have the same look and the color purple overlay, you need to use
mix-blend-mode
using themultiply
one.The mix-blend-mode CSS property sites how an element's content should blend with the content of the element's parent and the element's background.Instead of using all this code, you can do it all with two lines of code:
.stats-preview-card::after { content: ""; display: block; width: 100%; min-height: 240px; background-color: var(--soft-violet); border-radius: 0.625rem 0.625rem 0 0; opacity: 0.5; position: absolute; top: 0; left: 0; }
Here’s how you can add this to your
img
selector:img { mix-blend-mode: multiply; opacity: 84%;}
✌️ I hope this helps you and happy coding!
Marked as helpful1@juancaorgPosted about 2 years ago@correlucas Hey Lucas 👋!
Really appreciate your feedback. For a moment I didn't get what you explained until I read the docs about
mix-blend-mode
.But reading your comment carefully, the key was 'should blend with the content of the element's parent and the element's background.' And you are totally right.
I added a new parent element for the
--soft-violet
color and themix-blend-mode
to my image. The final result is much better and the code is easier to read.Thanks again 🤝
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