Design comparison
Solution retrospective
Hey! Thank you for reaching out. Idk how to do that on the image, i mean, i know but idk if putting an empty div is a good practice. Please if u see there is a good change to do let me know!
Community feedback
- @denieldenPosted almost 3 years ago
Hi Carlos, good job!
I had a look at your solution and I have a few suggestions for you:
- try to use
background-blend-mode
for image. Look here -> blend mode - To center the cards on the page try using Flexbox, it can help you better: give the flexbox and
height
properties to the body and remove allmargin
from the.container
class. - Note: Flexbox aligns to the size of the parent container. You can use the
vh
measurement for the height... Viewport Height handles the sizing of an element in relation to the height of the browser window.
In the end the mobile design not work.
Hope this help ;) And keep it up!
Marked as helpful0@CarlosTudeichPosted almost 3 years ago@denielden Thank you for your feedback. Right now, i'm heading to my code to implement these improvements
1 - try to use
- @Ayon95Posted almost 3 years ago
You can wrap the image in a <div> and use a ::before pseudo-element to create the image overlay.
<div class="image-container"> <img src="" alt=""> </div>
.image-container { position: relative; } .image-container::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; background-color: hsl(274, 100%, 34%); opacity: 0.5; filter: brightness(80%); }
These are the styles that I used to create the purple image overlay.
Marked as helpful0@CarlosTudeichPosted almost 3 years ago@Ayon95 Thank you for your feedback!. Yes, i was thinking on doing it with an empty div and putting the background of it as a url. But i guess that's not a grood practice. So i can do something quite similar with pseudoelements as you are saying right now, also pseudoelements is something i need to start learn moure about right now. Thanks!
0@Ayon95Posted almost 3 years ago@CarlosTudeich No problem :) Yeah that's why I put the image in a div so that I can use a pseudo-element because pseudo-elements don't work on replaced content like images. Yeah they're are good to know. You can do some pretty cool stuff with them.
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