Stats preview card component Using Flexbox and CSS Grid

Community feedback

• 

  Anosha Ahmed•9,300

  @anoshaahmed

  Posted over 3 years ago

  In the future, have your headings start with H1 and so. And to your question, this is what I did:

  HTML:

  <div class="mainpic">
      <div class="overlay"></div>
  </div>
  

  CSS:

  .mainpic {
      min-height: 446px;
      min-width: 540px;
      background: url(images/image-header-desktop.jpg) no-repeat center right / cover;
      border-top-right-radius: 9px;
      border-bottom-right-radius: 9px;
      opacity: 0.8;
  }
  
  .overlay {
      height: 100%;
      width: 100%;
      background: #a743d6;
      mix-blend-mode: multiply;
      border-top-right-radius: 9px;
      border-bottom-right-radius: 9px;
  }
  

  03

  Marked as helpful
• 

  Andrew Southern•390

  @whoamihealay

  Posted over 3 years ago

  I did this. You can tweak the filter to have the exact same taint but I found my solution to pop a bit more !

  .img {
      background-image: linear-gradient(
          hsla(277, 64%, 61%, 0.5),
          hsla(277, 64%, 61%, 0.5)
        ),
        url("./images/image-header-mobile.jpg");
        filter: contrast(200%) brightness(70%);
  }
  

  01

  Marked as helpful
• 

  P

  David Turner•4,130

  @brodiewebdt

  Posted over 3 years ago

  This is what I did: .stats-card-img::before { position: absolute; background-color: var(--accent); content: ""; height: 100%; mix-blend-mode: multiply; width: 100%; }

  01

  Marked as helpful
• 

  Ben•300

  @vBenTec

  Posted over 3 years ago

  Hi Jennifer,

  What you can do is to add a div on top of your image with position relative, or absolute and then set a z-index to a positive integer and add pink background with an opacity.

  Another solution would be to use simply the filter generator to add a pink effect. You can try to use this one   👇 https://cssgenerator.org/filter-css-generator.html

  00

  Marked as helpful