Stats Preview Card | SCSS, mobile first, responsive image

Community feedback

• 

  Enmanuel Otero Montano•2,155

  @Enmanuel-Otero-MontanoPosted over 2 years ago

  Hello @gmagnenat! Congratulations for your solutions.

  There are a couple of ways to do the color overlay on the image, but this is the best:

  filter: opacity(.6) drop-shadow(0 0 0 hsl(277, 64%, 61%));

  Propiedad filter

  Espero haberte ayudado

  Cheers!

  1

  ---

  

  T

  Gwenaël Magnenat•1,290

  @gmagnenatPosted over 2 years ago

  Hey @Enmanuel-Otero-Montano ! Thank you for your comment.

  I will try this filter combination. I haven't thought about the drop shadow here.

  Thanks for the tip!

  0
• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  Hello Gwenaël! Congratulations for you challenge solution!

  You did a good job with this solution, everything seems fine. The only this is slight different is the image color you can fix it playing with the opacity and the background color.

  Or you can use a shortcut using the propert mix-blend-modes and apply the multiply or overlay filter. The following code should fix your solution:

  .card__illustration :after { mix-blend-mode: multiply; opacity: 0.75; }

  But note that the background purple color should be inside another element to be affected by the opacity property. Try to apply the background-color inside the right column of the container.

  I hope it helps you, happy coding.

  1

  ---

  

  T

  Gwenaël Magnenat•1,290

  @gmagnenatPosted over 2 years ago

  Hey Lucas, thanks for your comment! Good catch with the background color. I will try your solution.

  1