Stats Preview Card Component Main Challenge

Community feedback

• 

  Atul kumar•200

  @AtulKumar0001Posted almost 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;

  }

  Marked as helpful

  2

  ---

  

  Ali Mahmoud•390

  @AliMahmoud21Posted almost 2 years ago

  @AtulKumar0001 There're many ways to do it, but this is the first time that I know the property "background-blend-mode", I will check it later, Also you can do it using "Psuedo Elements Before And After". It's an easy way, especially for beginners...

  0

  

  Atul kumar•200

  @AtulKumar0001Posted almost 2 years ago

  @AliMahmoud21 Yes, you are correct; you can do this with the after and before pseudo elements as well. It's just that was one of the methods.

  1
• 

  Jerome Dela Cruz•210

  @noonecaresman023Posted almost 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!

  Marked as helpful

  1

  ---

  

  Ali Mahmoud•390

  @AliMahmoud21Posted almost 2 years ago

  @noonecaresman023 Thanks bro, I will try to use the previous methods, especially yours and the "pseudo elements" and the other methods you guys have mentioned, thanks a lot for help.

  0

  

  Jerome Dela Cruz•210

  @noonecaresman023Posted almost 2 years ago

  @AliMahmoud21 Glad to help! Good luck!

  1
• 

  Ritesh Virulkar•190

  @Ritesh-VirulkarPosted almost 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.

  Marked as helpful

  1

  ---

  

  yishak abrham•2,150

  @yishak621Posted almost 2 years ago

  @Ritesh-Virulkar o i will try background blend property ...but i use psuedoelments ::after and achived the similar result so Which one is more professional so that i will choose from the two??🙏

  Marked as helpful

  0