Stats Preview Card - HTML & CSS

Community feedback

• 

  JuvoGenesis👾•2,010

  @AkoToSiJeromeEhPosted over 1 year ago

  Hi! Great work out there! I just wanted to share my technique on how I achieve the color overlay effect of the image using the CSS properties mix-blend-mode: multiply or background-blend-mode: multiply. However, since you're using the image as the background, background-blend-mode: multiply is the one that best suits it to match the design reference. That's all! I hope this technique works for you and helps. Happy coding!

  .card .img-container {

  border-radius: 0px 7px 7px 0;

  width: 50%;

  background: url(images/image-header-desktop.jpg);

  background-position: center;

  background-blend-mode: multiply;

  opacity: 0.8;you can adjust this

  background-size: cover;

  background-color: blueviolet;you can change this

  }

  Marked as helpful

  0

  ---

  

  Guilherme Campina•100

  @guilhermecampinaPosted over 1 year ago

  Hi @AkoToSiJeromeEh, thanks for the feedback. I had a hard time finding the color the way I did (and I don't think I got it 100%) and will study the way you shared. Thanks again!

  1