componente do cartão devisualização de estatísticas principal

Oi Pedro Salviano, tudo bem?

Gostei bastante do resultado do seu projeto, mas tenho algumas dicas que acho que você vai gostar:

Uma dica que meu amigo @correlucas me falou, para resolver o seu problema é:

• Para se aproximar do efeito de sobreposição na foto, é melhor você usar o modo mix-blend-mode. Tudo que você precisa é o div sob a imagem com esta cor de fundo: hsl(277, 64%, 61%); e aplique mix-blend-mode: multiply; e opacity: 80%; na img ou seletor de imagem para ativar a sobreposição mesclando a imagem com a cor da div. Veja o código abaixo:

img {
    mix-blend-mode: multiply;
    opacity: 80%;
}

o resto esta otimo!

espero que ajude... 👍

Hey nice work! I have a suggestion about your color problem. Here is a one way to solve it. Just add :after to you box, set top and left to 0 and give width and height 100% so it fits the original element. Then give the box a color and opacity. Don't forget to set content: "". Without the content property the before and after elements don't work. Your code should look like this .img-box:after { content: ""; position: absolute; left: 0; top: 0; width 100%; height: 100% background-color: purple; opacity: 0.5; } this is the basic way. There are other ways to set opacity to the color. But again google is your friend ;) Let me know if that helped you. Best Regards Q-bert.