CSS Flex

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hi NikitaBenzin, congrats for your new solution!

  Here's two tips for you:

  Instead of using this long code, you can reach a better overlay color with less code:

  img {
      max-width: 100%;
      display: flex;
      border-radius: 0 0.5rem 0.5rem 0;
      min-height: 100%;
      object-fit: cover;
      accent-color: var(--violet-100);
      filter: opacity(0.6);
  }
  

  You can use this code shortcut to reach the same color of the challenge. All you need is to use mix-blend-mode to make the color blend between the image and the background-color of the container. See the steps below to apply to the img or picture selector:

  img {
  mix-blend-mode: multiply;
  Opacity
  
  

  2.To reduce your css file and improve the performance loading your page you can use a tool called css minify that reduces the css code removing the unnecessary characters. You can use a VSCode plugin called minify css or this website tool to reduce your code: https://www.toptal.com/developers/cssminifier

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  1