Stats preview card component

Community feedback

• 

  Precious Aziken•510

  @AzikenpPosted about 2 years ago

  This is a very nice solution. I have a few points to add:

  1)When styling the card container, i think you should always give it a height to prevent it from just spilling out of the screen. 2) For the purple image overlay:

  • Place an empty div in the HTML file, just below the image you want it to overlay.
  • Then go to the CSS part and style the empty div giving it a color, width(same as the picture you want it to overlay), height(same as the picture you want it to overlay) and set it's position to absolute.

  Here is a link to my solution for better understanding: https://github.com/Azikenp/Stats_preview_card.git

  Marked as helpful

  1

  ---

  

  Wadie Ben•200

  @WadieBenabdouhPosted about 2 years ago

  @Azikenp Hey!

  Thanks a lot for the feedback, I got stuck with the purple overlay part, I had no idea how to put it there without ruining the HTML or CSS, thank you for the tip also I'll be fixing it tomorrow.

  That was helpful.

  0
• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello @WadieBenabdouh, congratulations on your solution!

  Nice code and nice solution! You did a good job here putting everything together. I’ve some suggestions for you:

  If you want to add the same effect of the design for the image overlaying it with purple there's a shortcut that is by using mix-blend-mode with the mode multiply and with an opacity around opacity: 82%, also add to the div containing the background-color: hsl(277, 64%, 61%);` to blend the image + bg color. See the code below:

  img {
  mix-blend-mode: multiply;
  opacity: 82%;}
  

  Here's a good article explaining these effects with mix-blend-mode: https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode

  ✌️ I hope this helps you and happy coding!

  0