Stats Preview Card Component (Solution)

Community feedback

• 

  Firerenza•60

  @FirerenzaPosted about 1 year ago

  Another option is to use the linear gradient function.

  This is what I did:

  .imageContainer{ background: linear-gradient(0deg, hsl(277, 64%, 61%, 0.5) 1%, hsl(277, 64%, 61%, 0.5) 100%), url(images/image-header-desktop.jpg); }

  Marked as helpful

  1
• 

  Nathan Ray•230

  @NathanRayMPosted about 1 year ago

  Hello, In CSS You could try setting the background color to the container that the image is in. Then, add the mix-blend mode to your image in CSS and set it to multiply and adjust the opacity.

  .image-container{
  background-color: hsl(277, 64%, 61%);
  }
  img{
  mix-blend-mode: multiply;
  opacity: 0.75;
  }
  

  Marked as helpful

  1