Responsive Stats Preview Card using pure HTML and CSS

Community feedback

• 

  P

  Nikitossik•370

  @NikitossikPosted over 1 year ago

  Hey, you can create an overlap by using pseudo elements. You have to wrap an img tag with div.someClassName and add position: relative. Then add ::before or ::after to this element and give it position: absolute so it could move inside of it, aplly background, width, height and don't forget about z-index to make it above the image.

  Also there is an approach with backgrounds with background-blend-mode

  good luck)

  0
• 

  Clive Chambers•230

  @Clive-ChambersPosted over 1 year ago

  I did something like this to make the image have a purple overlay effect. Let me know if this helps :)

  <div class="office-img">
          <picture>
            <source media="(min-width: 415px)" srcset="./images/image-header-desktop.jpg">
            <img src="./images/image-header-mobile.jpg" alt="A picture of three women in an office">
          </picture>
  </div>
  
  

  .office-img {
      display: inherit;
      position: relative;
      max-height: 289px;
      background-color: hsl(277, 64%, 61%);
      
  }
  
  img{
      width: 100%;
      height: 100%;
      position: relative;
      background-size: cover;
      mix-blend-mode: multiply;
      opacity: 0.75;
  }
  
  

  0