# Superimpose images

**URL:** <https://community.glideapps.com/t/superimpose-images/34455>\
**Category:** Ask for Help\
**Created:** [November 13, 2021, 5:05am UTC](https://community.glideapps.com/t/superimpose-images/34455 "2021-11-13T05:05:43Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [November 13, 2021, 5:05am UTC](https://community.glideapps.com/t/superimpose-images/34455/1 "2021-11-13T05:05:43Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Oscar\_Mijael\_Perez\_G](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/oscar_mijael_perez_g/32/30514_2.png) [@Oscar\_Mijael\_Perez\_G](https://community.glideapps.com/u/Oscar_Mijael_Perez_G)\
**Post date:** [November 13, 2021, 5:30am UTC](https://community.glideapps.com/t/superimpose-images/34455/2 "2021-11-13T05:30:04Z")

</div>

the only way I saw, would be to put a background image type background, and in front of that put another image

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [November 13, 2021, 5:32am UTC](https://community.glideapps.com/t/superimpose-images/34455/3 "2021-11-13T05:32:23Z")

</div>

use CSS image and control it with opacity

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [November 13, 2021, 5:42am UTC](https://community.glideapps.com/t/superimpose-images/34455/4 "2021-11-13T05:42:14Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [November 13, 2021, 5:46am UTC](https://community.glideapps.com/t/superimpose-images/34455/5 "2021-11-13T05:46:08Z")

</div>

did ever try using CSS codes in the rich text component? if not start here…

> **[Code BOOK](https://code-book.glideapp.io/)**
>
> share cool codes, scripts and links

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

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [November 13, 2021, 5:55am UTC](https://community.glideapps.com/t/superimpose-images/34455/6 "2021-11-13T05:55:22Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [November 13, 2021, 5:58am UTC](https://community.glideapps.com/t/superimpose-images/34455/7 "2021-11-13T05:58:02Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [November 13, 2021, 6:07am UTC](https://community.glideapps.com/t/superimpose-images/34455/8 "2021-11-13T06:07:06Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [November 13, 2021, 6:11am UTC](https://community.glideapps.com/t/superimpose-images/34455/9 "2021-11-13T06:11:28Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [November 13, 2021, 6:20am UTC](https://community.glideapps.com/t/superimpose-images/34455/10 "2021-11-13T06:20:49Z")

</div>

OK, I understand. In my case, the complexity will also increase with the number of floors of the building being stacked. Unfortunately, [Juxtapose](https://juxtapose.knightlab.com/) doesn’t support transparency  
Thanks, Uzo.

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [November 13, 2021, 6:32am UTC](https://community.glideapps.com/t/superimpose-images/34455/11 "2021-11-13T06:32:16Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [November 13, 2021, 6:39am UTC](https://community.glideapps.com/t/superimpose-images/34455/12 "2021-11-13T06:39:32Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![system](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/system/32/53398_2.png) [@system](https://community.glideapps.com/u/system)\
**Post date:** [November 14, 2021, 6:40am UTC](https://community.glideapps.com/t/superimpose-images/34455/13 "2021-11-14T06:40:06Z")

</div>

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.
