Stats Preview

Community feedback

• 

  hitmorecode•6,250

  @hitmorecodePosted about 1 year ago

  If you apply these changes it will work, you will see the overlay on the image.

  img{
      width:100%;
      height:100%;
      /* these two line were the problem, you can remove them. I just commented them out */
  /*     object-fit: cover;
      position: relative; */
  }
  
  .right {
      position: relative;
  }
  
  .right::after{
      position: absolute;
      content: '';
      background-color: var(--soft-violet);
      mix-blend-mode: multiply; /* add this line */
      opacity: 0.8; /* add this line */
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
  }
  

  Marked as helpful

  0

  ---

  

  Ethan•320

  @Et18nPosted about 1 year ago

  @hitmorecode thank you so much for this.

  Could you tell me how does this work? Does it apply to the parent class instead of the image?

  0
• 

  KingSky•190

  @KingSkyrosPosted about 1 year ago

  Hello, would you like to try this?

  img{
      border-top-right-radius: 2%;  
      border-bottom-right-radius: 2%;    
      mix-blend-mode: multiply;
  }
  

  Here's more info: https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode

  I hope this helps!👍

  Marked as helpful

  0