Card Component using CSS Flex box

Community feedback

• 

  darryncodes•6,350

  @darryncodes

  Posted over 3 years ago

  Hi Thomas,

  Nice work on this project and no faults on the accessibility/html report - well done!

  As an alternative option to the overlay approach you could try adding a solid linear-gradient to a background image: background-image: linear-gradient(hsl(277, 64%, 61%), hsl(277, 64%, 61%) ), url(../your/image-filepath);.

  You would also need to explore background-blend-mode (multiply usually does the trick).

  Also I think you should bring your media query in sooner, it suffers at the small tablet size, the provided sizes in the design guide aren't prescriptive - do what you need to, to make the design work!

  I hope that helps, happy coding!

  10

  Marked as helpful
• 

  cacosted•570

  @cacosted

  Posted over 3 years ago

  Hello bro, your solution looks nice, I understand, the color overlay part was quite rare to pull out. The way that I did it, was with background-image: linear--gradient(color), url(".image/some.png'). I also see other solutions that did it with opacity and display none. Maybe you could check it out

  00

  Marked as helpful
• 

  Francis•260

  @FrancisKhaledKhodja

  Posted over 3 years ago

  Hello. You must add a div with a background-color on the image and play with the opacity and thé mix-blend-mode.

  00

  Marked as helpful
• 

  Marcio Teixeira•90

  @marcioUfrj

  Posted over 3 years ago

  Nice work :)

  00