How to create image overlay

Hello, I want to have a large hero pic on my app AND ALSO something (image/group/shape) that sits on top or in front of it that will be a darker colour. that way the original pic under it is not so bright. ideally i would have a THIRD lawyer which are text in white font. I am trying to layer things on top of one another but ebcause my canvas is COLUMN they just stack instead. is there a way to LAYER on top rather than stack?


ideally everything would sit on top of each other

Yes, columns stack.

You need to make the group ‘align to parent’ to layer.

Do you mean GROUP A here shd be Align to Parent? thx!

No. I would make ‘group main image’ align to parent.

You could then center your image and make it 100% height and width.

Then, you can put your overlay center and 100% height and width.

Then add your text top center, or wherever you want it and adjust your margins.

You can adjust the order of the elements by arranging them in the elements tree, or right clicking on them and then clicking bring to front or back.

To avoid creating unnecessary groups you can use this CSS. 0.8 - color transparency

#id::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.8) }

What I suggested doesn’t create any extra groups.