leighton's solution to stats card

Community feedback

• 

  riverCodes•300

  @riverCodesPosted over 2 years ago

  Hey, good job on the challenge! For the overlay, you can do this:

  1. Delete your img tag and apply it as a background image on it's container. Use the background image properties to size your image accordingly.
  2. Use pseudo element before on the background image div. Make sure it has an empty string content. div.bg-img::before { content: " "; } something like this.
  3. Make the background image container relatively positioned and absolutely position the before child on top of it. Set your background color to purple or whatever you want, and it should apply over your image. In case it doesn't check your z-index order.
  4. You can also apply blending modes like color, hue, hard-light using the mix-blend-mode property to mix the two elements together.

  Hope this helped!

  Marked as helpful

  0