Skip to content
Submitted over 3 years ago

Stats preview card component - HTML CSS - By Aderr0

Aderr0•55
@Aderr0
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

[English] I'm not really sure about the way i did for the image and the filter. I did two <div> with background and i superimpose them and play with opacity. Also I didn't know how to keep the complete image and adapt the text to this.

Thanks for this challenge

[Francais] Je ne suis pas sur de ma façon d'avoir fait pour l'image et le filtre. J'ai créé deux div avec des bakkgrounds que j'ai superposé et joué avec l'opacité. Ensuite, je n'ai pas trouvé comment garder les dimensions de mon image et adapter le texte en fonction.

Merci pour ce challenge

Community feedback

  • Patrick•14,265
    @palgrammingPosted over 3 years ago

    you might want to look into making the image just a image and not a background image and thing using a overlay with blend mode https://highrise.digital/blog/css-blend-modes/

    I do not think the image should be having the zoom effect

    0
    Aderr0•55
    @Aderr0Posted over 3 years ago

    @palgramming Woaw ! I didn't mean i'll get any answer ! I'll try it, thanks a lot. I never heard before you about css blend modes :D

    0
    Patrick•14,265
    @palgrammingPosted over 3 years ago

    @Aderr0 No worries with CSS there is a whole lot to learn..... but a little bit at time time and we hope we will be good in the end

    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