Stats preview card component

Community feedback

• 

  Lucas Piputto•305

  @paiputPosted almost 3 years ago

  Hi Brandt!

  To apply the purple filter to the image you could do something like this. In this case you wouldn't need the <img> tags inside the <div class="cardImageContainer">

  .cardImageContainer {
      /* then you would replace the backround url for mobile view with media query */
      background: url('../assets/images/image-header-desktop.jpg') var(--soft-violet);
      background-blend-mode: multiply /* you can also try other values */;
  }
  

  It looks like you are having some Accessibility and HTML Validations problems. You you can see a brief description of each problem by clicking the "view report" button.

  • Images must have alternate text: You should add an alt attribute with an alternative text in case image can't load.
  • Document should have one main landmark: You could fix this by replacing the <section> tag with a <main> tag.
  • Page should contain a level-one heading
  • All page content should be contained by landmarks

  Marked as helpful

  1

  ---

  

  Brandt Darum•240

  @brandtdarumPosted almost 3 years ago

  @paiput Exactly what I needed. Thanks!

  1

  

  Lucas Piputto•305

  @paiputPosted almost 3 years ago

  @brandtdarum you're welcome. I'm glad it was useful for you

  0
• 

  Just9krish•590

  @Just9krishPosted almost 3 years ago

  Learn and use mix blend mode to color image.

  Marked as helpful

  0
• 

  Azrul Naim•180

  @sjtapePosted almost 3 years ago

  <div> <img> </div>

  css: div {background-color: ;} img {opacity: 50%;}

  Marked as helpful

  0