Stats preview card component

Community feedback

• 

  Jeje•2,050

  @AkoToSiJeromeEh

  Posted about 2 years ago

  Hi! Great work out there! I just wanted to share how you can achieve an image color overlay using CSS properties like mix-blend-mode: multiply or background-blend-mode: multiply. Since you are not using the image as a background, mix-blend-mode: multiply is suitable. If you are new to this property, mix-blend-mode blends the background color of its parent element. As you can see in the (.banner__img) , I added a background and used mix-blend-mode on the (img ) also if you add this properties you can remove the properties of .banner__img:after, I hope this suggestion works and helps. Happy coding!(the bold text is the code i modify in your source code)

  .banner__img {

  position: relative;

  /* overflow: hidden; */

  background-color: #9039e0;you can adjust or change this

  }

  img {

  max-width: 100%;

  height: 100%;

  mix-blend-mode: multiply;

  opacity: 0.8;you can adjust this

  }

  10

  Marked as helpful