Stats Preview

Community feedback

• 

  JuvoGenesis👾•2,010

  @AkoToSiJeromeEhPosted over 1 year ago

  Hi ! Great Work Out there , I just want to share how can I achieve to match the image overlay in the design reference using the mix-blend-mode : multiply , and what you need to do is add a bg-color in .image-container and remove all css properties on .image-container:before and lastly add mix-blend-mode:multiply on .image (the bold text is the code I modify in your source code) I hope this suggest works and helps . happy coding

  **you can remove this**
  .image-container:before {
  /* content: ""; */
  position: absolute;
  /* top: 0; */
  /* left: 0; */
  /* width: 100%; */
  /* height: 100%; */
  /* background-image: linear-gradient(hsla(277, 74%, 18%, 0.68), hsla(277, 74%, 18%, 0.634)); */
  /* opacity: 0.5; */
  /* z-index: 2; */
  }
  

  .image-container {

  position: relative;

  background-color: blueviolet;you can change this

  }

  .image {

  mix-blend-mode: multiply;

  width: 34rem;

  object-fit: contain;

  position: relative;

  border-top-left-radius: 1rem;

  border-top-right-radius: 1rem;

  }

  Marked as helpful

  1

  ---

  

  Andrei•530

  @XeotheosisPosted over 1 year ago

  @AkoToSiJeromeEh Thank you, it worked

  0

  

  JuvoGenesis👾•2,010

  @AkoToSiJeromeEhPosted over 1 year ago

  @Xeotheosis, you're always welcome. I just forgot to add opacity: 0.8 (or any value that matches well) on the .image class to match the design reference. Happy coding! 🚀

  0