Skip to content
Submitted over 3 years ago

First attempt with possible wrong overlay

Matheus Rodrigues•290
@matheus-rodrigues00
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Stats preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Is the way that I did the overlay right? .purple-container { height: 100%; overflow: hidden; background: linear-gradient(hsl(277, 64%, 61%, 0.5), hsl(277, 64%, 60%, 0.5)), url("images/image-header-desktop.jpg"); background-position: center; background-size: cover; display: block; }

Community feedback

  • Agata Liberska•3,995
    @AgataLiberskaPosted over 3 years ago

    Hi Matheus! I mean... it works well :) Another way to achieve a similar effect would be to set the image in background-image, add the violet in background-color and use the background-blend-mode property. Not saying that this would be better but it's good to be aware of options!

    Have a look at your solution in mobile - the card could use some margin all around. You could also resize the image div on smaller screens to a bit smaller height (so that you don't lose too much of the image on the sides). For example, you could try using vw as your height unit and set 400px as max-height.

    Hope this helps :)

    1
    Matheus Rodrigues•290
    @matheus-rodrigues00Posted over 3 years ago

    Thanks a lot AgataLiberska, I really appreciate your feedback. I'll implement this suggestions :D

    0

Please log in to post a comment

Log in with GitHub

Join 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