Really Janky Stats Preview Card

Community feedback

• 

  Hady SANÉ•60

  @hadysanePosted about 3 years ago

  Hi it is difficult the purple filter on the image, my solution, it is make in div background-color, backgrond-image and use the proprety background-blend-mode: multiply; for to blend the image and color

  Marked as helpful

  1
• 

  Rachel Mozzetta•135

  @Mozzarella-chzPosted about 3 years ago

  The color overlay definitely gave me the most trouble as well. There are alot of different ways to do it but here is the solution i landed on that gave me minimal headache......

  In my HTML markup:

              <div class="card-picture">
                  <div class="color-overlay"></div>
              </div>
  *!all the other code within the "container" div....etc. etc. etc.!*
  </div>```
  
  and in my CSS markup:
  ```.container .card-picture {
                  background: url("images/image-header-mobile.jpg");
                  background-repeat: no-repeat;
                  background-size: contain;
                  width: 100%;
                  height: 300px;
                  border-radius: 10px 10px 0 0;
              }
              
              .container .card-picture .color-overlay {
                  height: 275px;
                  width: 100%;
                  background: hsl(277, 64%, 61%);
                  opacity: .5;
                  border-radius: 10px 10px 0 0;
              }```
  
  Hope that is helpful!
  

  Marked as helpful

  0