Skip to content
Submitted almost 4 years ago

Mobile first site using css Grid

victoriaodemakin•125
@victoriaodemakin
A solution to the Stats preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I'll like any feedback on how to do the purple overlay on the image as I was unable to achieve that. Any other feedback is welcomed as I'm trying to improve my css before diving into js.

Code

Please log in to post a comment

Log in

Community feedback

  • SmoothCrimminal•135
    @SmoothCrimminal

    You can achive that by adding right before img a div with class for example: "overlay" and then styling it. with rgba or hsl, for example: hsl(277, 64%, 61%, 0.45).

    You can check my solution if you'd like to have a reference, but it's not very good. This was my first challenge tho :D I would definately make it different rn.

    Marked as helpful
  • Андрій Рогов•1,155
    @Andrii-Rohov

    hi, add this css rule overlay::after { content: ""; inset: 0; background-color: purple; opacity: 0.5; } its called pseudo elements...look it up))

    Marked as helpful

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