Stats preview card component

Community feedback

• 

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  👾Hello Hossam, congratulations for your new solution!

  I saw your live site and I can say that you've done a good work building the solution and wrapping the content.

  I saw that you've used a long code to reach the purple overlay effect:

  YOUR CODE:

  .image {
      border-radius: 8px 8px 0 0;
      min-height: 260px;
      background: url(images/image-header-mobile.jpg);
      background-size: cover;
      background-position: auto;
      box-shadow: 0px 0px 0px 999px inset hsl(277deg 64% 61% / 54%);
  }
  

  THE CLEAN CODE THAT FIXES THE OVERLAY

  To have your image purple with the sameoverlay effect, you need to use mix-blend-mode to make this color blend between the image and the background-color of the container. See the steps below to apply to the img or picture selector:

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

  👋 I hope this helps you and happy coding!

  1
• 

  Hossam khalaf•230

  @hossam-khalafPosted about 2 years ago

  Thanks for your feedback Lucas, Maybe it's a habit from my previous work to check browser support of css properties because they were very strict about it 😂 You can check it at mdn and caniuse.com. I used the trick of inset shadow, which is not long btw, just a single line. The result is Not 100% percent as the design, I know Anyway I like to see your feedbacks on my next challenges. Always helpful! Have a great day, happy coding.

  0