Stats Preview Card Component

Community feedback

• 

  Lucas 👾•104,160

  @correlucas

  Posted almost 3 years ago

  👾Hello @CodeWithSubaru, congratulations for your new solution!

  Your component is great, you can improve it by replacing the main div with a semantic tag, this case you can use <main> or <article>. To make the container and the image responsive you need to max-width: 100% in place of widthto allow the container to contract, also use object-fit: cover to make the image crop while scaling with the container.

  You need to use mix-blend-mode to make this color blend between the image and the background-color of the column blending image and color. See the steps below to apply to the img or picture selector:

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

  👋 I hope this helps you and happy coding!

  11

  Marked as helpful
• 

  Matheus Dumont•390

  @Dumont19

  Posted almost 3 years ago

  Great solution. If you don't mind, there is an improvement that can be made.

  To let the image with the overlay effect, you can use the mix-blend-mode property of css with the multiply value and add the filter property or some other that arrives at a similar result.

  Another thing, your solution is not adapted to the screen of smaller devices such as smartphones.

  11

  Marked as helpful