Stats Preview Card Component Main Challenge

Community feedback

• 

  Atul kumar•200

  @AtulKumar0001

  Posted over 2 years ago

  Hey @Ritesh-Virulkar, To do so, add the class image-2 (or change the name, but then you must also change the CSS selector name provided below) to the div where you have placed your desktop header.jpg, and then apply this after adding the class.

  .image-2{

      width: 50%;

      position: relative;

      background-color: hsl(277, 64%, 61%);

      opacity: 1;

  }

  After that, add another class to your img selector -> img  (you can change this as well) and apply this style.

  .img {

      display: block;

      object-fit: cover;

      min-width: 100%;

      opacity: .75;

      mix-blend-mode: multiply;

  }

  22

  Marked as helpful
• 

  Jerome Dela Cruz•210

  @noonecaresman023

  Posted over 2 years ago

  Hi, try using background: url() css property and play around with it and see if it would solve your problem. Start with this <div class="img"> <div class="img-color-overlay"></div> </div> then use background: url() property inside the .img then do the same for img-color-overlay but with a color. Looks great!

  12

  Marked as helpful
• 

  Ritesh Virulkar•190

  @Ritesh-Virulkar

  Posted over 2 years ago

  Hi, for the background color, you can check out css property "background-blend-mode". I hope it should solve your problem and also try to have a semantic html structure to remove warnings. Rest are good! Keep up the great work.

  11

  Marked as helpful