Is it possible to position elements above one another I would like to add this gradient section and some buttons etc above the image
Of course you can do this.
Here’s a short tutorial explaining how to overlay one element over another:
You can also do it using custom CSS directly in your styles CSS files.
Hey thanks for that I did already check the guide out, my issue is that I just want to use a container and give it a background, it seems to be forcing me to have some element inside to see the gradient.
What component do you suggest I should use?
You just need to define the width/height of a container and it will show the background.
Without anything inside or set dimensions and container on its own has no dimensions.
Have you tried viewing in browser?
I believe in Wappler, in the design view, an empty section/container displays as that ‘grey label’ view that you can see in your screenshot.
If you view it in a browser, or put any content in the sections, you should see the color
In the browser it’s not display, I would like to create a fade transition over the image when hovered or active. 0% white -> 22% so there’s no content in there. Thanks for your help anyway I will try revisit this topic later.
Yes, you need some content in the sections when using % for sizing. 100% of nothing is nothing.
Do you know a way I can make the section expand to fit the parent? my grid is responsive so I think can’t use px dimension
Agreed. Id just put something in their for now to help visualise it. A paragraph element will have some dummy text if its a blog post. Or an image.
What you’re after is perfectly easy to achieve, whether using the visual design panel or some custom CSS.
But start with either some fixed widths, 100px etc. or put some content in their and that way you will be able to see it in the Design view
What do you plan to have in those sections? Just put some dummy text or image or whatever content you had planned for those sections. Doesn't have to be your final content - just some content.