Opacity of group affecting text element inside group

I’m designing the hero section for my website, and have set the background of the group to an image. I’m putting text inside this image. However, I’ve changed the opacity of the group to 50%. I don’t want this to impact the text, but it does - I’m assuming anything I put inside this group will have its opacity effected. Any workarounds?

1 Like

Just don’t set the Opacity of the parent group… use an inner overlay-group instead.

As far as I’m aware, the only way to achieve what you want is to edit the image itself and reduce its opacity (make sure you save as a png with a transparency layer). Then use this reduced-opacity image as your background, rather than changing the opacity of the group in bubble.


In addition to editing the photo first as @project-monitor suggests, you can also create the text element outside of the the group and use exaggerated margins to make it reappear over the desired group. For example, you can put the text element below your group with the image and then set the text element’s top margin to be a negative value. If you want it centered vertically, then divide the image group’s height by 2, then add half of the text element’s height. Now make that number negative and it should be centered.