Stats preview card component

Community feedback

• 

  P

  Adriano•42,700

  @AdrianoEscarabotePosted 13 days ago

  Hi Mohamed -hamid, hope you're doing well! I loved how your project turned out, but I’ve got a few suggestions that could be useful:

  To get closer to the photo overlay effect, you'd better use mix-blend-mode. All you need is the div under the image with this background color: hsl(277, 64%, 61%); and position mix-blend-mode: multiply and opacity: 80% on the image or apply image to activate the overlay by blending the image with the div's color. See the code below:

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

  The rest is fantastic.

  Hopefully, you'll find it helpful. 👍

  1

  ---

  

  Mohamed -hamid•330

  @alexpromanPosted 13 days ago

  @AdrianoEscarabote Hello Adriano,

  I was really delighted by your visit and your willingness to help. I truly appreciate your interest in assisting beginners like me who are still taking our first steps on this journey.

  Regarding your observation, I am indeed using the feature you mentioned, and you can find it here when reviewing the code:

  .card-img .image img {
  height: 100%;
  object-fit: cover;
  mix-blend-mode: multiply;
  opacity: 0.9;
  }

  There might be some areas that need further refinement, and I look forward to gaining more expertise from you with great gratitude.

  Once again, I appreciate your visit and wish you continued success.

  1