stats-preview-responsive-card-design

Community feedback

• 

  👾 Ekaterine Mitagvaria 👾•7,600

  @catherineisonlinePosted almost 2 years ago

  Hey, for the image to match the color, I did something like this, I hope that helps, sizes might not fit your solutions but you can adapt it depending to your own code:

  <div class="image-container">
  img class="main-image" src="images/image-header-mobile.jpg" alt="">
  </div>
  
  .image-container {
    display: inherit;
    position: relative;
    width: 100%;
    border-radius: 0 10px 10px 0;
    background-color: hsl(277, 64%, 61%);
  }
  .main-image {
    width: 100%;
    height: 100%;
    position: relative;
    background-size: cover;
    border-radius: 0 10px 10px 0;
    mix-blend-mode: multiply;
    opacity: 0.75;
  }
  
  

  IF THIS WAS HELPFUL PLEASE MARK IT AS HELPFUL 🤩

  Marked as helpful

  1

  ---

  

  Burak Durmuşoğlu•160

  @burak2482Posted almost 2 years ago

  @catherineisonline Thanks! It helped.

  0
• 

  Adriano•38,120

  @AdrianoEscarabotePosted almost 2 years ago

  Hi Burak Durmuşoğlu, how are you? yes! its me again hahahah

  To get closer to the photo overlay effect, you'd better use mix-blend mode. All you need is the div under the image with this background-color: HSL(277, 64%, 61%); and position mix-blend-mode: multiply and opacity: 80% on the image or apply the image to activate the overlay by blending the image with the div's color. See the code below:

  img {
      mix-blend mode: multiply;
      opacity: 80%;
  }
  

  You can read this content which is explaining these effects with mix-blend-mode: click here

  To improve the code structure wrap this div:

  <div class="attribution">

  with the semantic tag footer

  The rest is great!

  I hope it helps... 👍

  Marked as helpful

  1

  ---

  

  Burak Durmuşoğlu•160

  @burak2482Posted almost 2 years ago

  @AdrianoEscarabote Thank you so much again! You help me on my journey!

  0