Stats preview card

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted almost 2 years ago

  Hi, Jiwon Suh!

  For the image, use the <picture> element. After that, use <source> element with media attribute to control which image to show at some breakpoints.

  To create the overlay, I recommend using mix-blend-mode property.

  Also, the image should have empty alternative text (alt="").

  Another suggestion is to use list element to show the statistic content.

  I hope this helps. Happy coding!

  Marked as helpful

  1

  ---

  

  Jiwon Suh•210

  @suhjiwon95Posted almost 2 years ago

  @vanzasetia Thank you! I never knew there is a <picture> tag. I learned a lot about it and I am excited to use it for other projects!

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted almost 2 years ago

  @suhjiwon95

  I took a look at your solution and I recommend removing the following code.

  <source media="(min-width:370px)" 
                  srcset="./images/image-header-mobile.jpg">
  

  You don't need it because if the browser does not use the other <source>, then it will use the <img> instead.

  Marked as helpful

  1

  

  Jiwon Suh•210

  @suhjiwon95Posted almost 2 years ago

  @vanzasetia ohh I see. Then for the src for the <img> tag, I should put image-header-mobile.jpg, right?

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted almost 2 years ago

  @suhjiwon95

  Yes, you should put the mobile image on the src attribute of the <img>. 👍

  0
• 

  Samuel Llibre Santos•400

  @ZyruksPosted almost 2 years ago

  What you can do to get the color on the picture is created a div. This div should on top of the image.

  Make the div same height and width of the image, background-color should be the purple and use the property mix-blend-mode: multiply.

  Here is the HTML and CSS ;)

  <div class="hero-img">
        <img src="./images/image-header-desktop.jpg" alt="desktop" class="desktop">
        <img src="./images/image-header-mobile.jpg" alt="" class="mobile">
        <div class="filter-color" ></div>
  </div>
  

  
  .hero-img {
  position: relative;
  }
  
  .filter-color {
  width: 100%;
  height: 100%;
  background: var(--Soft-violet);
  position: absolute;
  top: 0;
  mix-blend-mode: multiply;
  opacity: 90%;
  }
  

  With mix-blend-mode, you can blend color like the blend option in photoshop.

  More about that here MDN Mix Blend Mode

  1

  ---

  

  Jiwon Suh•210

  @suhjiwon95Posted almost 2 years ago

  @Zyruks Thank you! that worked perfectly :D

  0