Stats component using html/css

Community feedback

• 

  Sergio Reynoso•320

  @sergioreynosoPosted over 2 years ago

  Nice job! I notice the <img> is not taking the whole height of its container. This is because the <img> tag only has it's width at 100%, you want to also do its height. Of course this would then then stretch it and distort it; this is where the object-fit property comes to the rescue by setting it to cover.

  img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
  }
  

  A challenge for you is to pretend this was as component that would take any kind of image without the purple overlay added to it. How would you add the color overlay with just css? ;-)

  Cheers!

  Marked as helpful

  0

  ---

  

  Ivan Olmo•310

  @ivanolmoPosted over 2 years ago

  @sergioreynoso wow, I totally missed that. I appreciate it. I mostly use Firefox and that bottom gap isn't present, but of course it's there in all my other browsers. Oops, updated my img code and solution shows it's fixed.

  As for the purple overlay, since it's a background on the container itself, I think any image would work there since we're using opacity and mix-blend-mode. Just tested with a few different images from Unsplash and it still works.

  1

  

  Sergio Reynoso•320

  @sergioreynosoPosted over 2 years ago

  @ivanolmo oh that’s greats! For some reason I thought the img was loaded as is with the color on it already. I don’t know what I would do without blend modes. Lol.

  Marked as helpful

  0