Stats-preview-card first practice site

Community feedback

• 

  Adam.Codes•180

  @AdamCodes42Posted over 3 years ago

  You can use pseudo selector ::before ::after for overlay and it will always be relative to your image Happy Coding😉

  1
• 

  Naveenraj•35

  @naveenraj93Posted over 3 years ago

  For Color Overlay, i have coded as 'set the required Background Color to the tag under which image is present, then for image set mix-blend-mode: screen and filter:contrast(100%)'

  0

  ---

  

  Harshit•20

  @alphacomaPosted over 3 years ago

  @naveenraj93 can u explain a bit more

  0

  

  Naveenraj•35

  @naveenraj93Posted over 3 years ago

  @alphacoma : Please refer below,

  <div class="cardImage"> <img src="images\image-header-desktop.jpg"> </div>

  Here, I have set the Background color to .cardImage as violet. Then have set img style as mix-blend-mode: screen; filter: contrast(100%);

  This will make the Bg-color of the div(parent) to be Blend with the image.

  1