Hi, Gliders
I have an idea to superimpose multiple image layers, such as a building floor layer. Each layer can be adjusted with a slider for its opacity. Has anyone done it before?
Very appreciate any advice.
the only way I saw, would be to put a background image type background, and in front of that put another image
1 Like
use CSS image and control it with opacity
Thank you for the responses
@Oscar_Mijael_Perez_G, How to stack two images into one image component?
And @Uzo what’s the CSS like?
did ever try using CSS codes in the rich text component? if not start here…
get code for the background image, change width, and position, and control it by changing z-index or opacity, do the same for other images that you wanna stock on top
I’ve already installed your codebook a long time ago. Do you mean all stacked images use CSS with the Richtext component instead of the image component?
yes, if use the desktop version of code book, click the palms or shark button to see the image stacking effect.
You can apply CSS to the image component, just find the proper target or nth child() for it
The problem is that I need a slider to set each layer with a different opacity level for the ux including the background. Can you describe it in more detail?
glide does not have sliders yet, and creating one will be very complicated, you can use a tiles list as a slider to have some control… like setting each tile for 25% less opacity … or simply do that with choice or checklist component
1 Like
OK, I understand. In my case, the complexity will also increase with the number of floors of the building being stacked. Unfortunately, Juxtapose doesn’t support transparency
Thanks, Uzo.
1 Like
the simplest way would be to stack all images and use templates for CSS with variable opacity then adjust it with the number entry component… this way you will see the effect live, not switching between editors.
1 Like
Oh yeah, it’s also an alternative to numeric input, and the user can use the mouse scroll to fine-tune the opacity.
Thanks again Uzo
1 Like
This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.