I have multiple divs, each of the same class. The class is semi transparent (by setting opacity: 0.2;).
The layout is pretty complex, and occasionally those divs will overlap.
The problem is that wherever they are overlapping the opacity adds up, so the overlapped area is darker. The more elements overlap, the darker it gets. See this image for an explanation:
(red and blue borders were added for clarity, they are not present in the real thing)
I'm looking for a way to prevent this, so that the color in the overlapping region does not further darken. Is there a way to do that? Some fancy "mix mode" of sorts?
Ideally, it could all be done in CSS.
Here is an example in JSfiddle: https://jsfiddle.net/begkw16d/
Would appreciate any help. Thank you very much...