Stats Preview Card Component

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted over 2 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!

  Marked as helpful

  1

  ---

  

  CodeWithSubaru•150

  @CodeWithSubaruPosted about 2 years ago

  @correlucas Thank you for your wonderful feedback sir!

  0
• 

  Matheus Dumont•390

  @Dumont19Posted over 2 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.

  Marked as helpful

  1

  ---

  

  CodeWithSubaru•150

  @CodeWithSubaruPosted about 2 years ago

  @Dumont19 Thank you for your feedback sir!

  0