Stats preview card component - newbie challenge #1

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 3 years ago

  👋Hi Rohit! My name is Vanza.

  To add the purple tint, you can wrap the img tag with one div then in your CSS, you can do

  
  div {
    position: relative;
  }
  
  /* Create an overlay */
  div::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: hsla(277, 64%, 61%, 0.5);
  }
  
  

  Or the second way to do it (which is the best way), is that first create a div under the container and set the image as a background-image and then add background-color: hsl(277, 64%, 61%), lastly you can do background-blend-mode: multiply.

  That's it! Hopefully this will solve your problem!

  1

  ---

  

  Rohit Regimon•60

  @rrgmonPosted over 3 years ago

  @vanzasetia Hey! Thank you for this solution! I was trying the pseudo class method, but seems like I was doing it wrong since I tried it straight for the IMG tag. Thank you!

  0