# Creating responsive overlapping image layers

**URL:** <https://forums.realmacsoftware.com/t/creating-responsive-overlapping-image-layers/54912>\
**Category:** Elements\
**Created:** [March 6, 2026, 9:18pm UTC](https://forums.realmacsoftware.com/t/creating-responsive-overlapping-image-layers/54912 "2026-03-06T21:18:50Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![ticknerdesign](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ticknerdesign/32/33805_2.png) [@ticknerdesign](https://forums.realmacsoftware.com/u/ticknerdesign)\
**Post date:** [March 6, 2026, 9:18pm UTC](https://forums.realmacsoftware.com/t/creating-responsive-overlapping-image-layers/54912/1 "2026-03-06T21:18:50Z")

</div>

Hi guys, I need to know if Elements is capable of doing this yet: **Creating responsive overlapping layers of images, text, & content.**

I used a Stack for Classic Rapid Weaver called [Overlap Canvas](https://onelittledesigner.com/rapidweaver-stacks/) by 1LD. It is by far my favorite add-on Stack and I used it liberally for my latest web design project.

> **[JJCasano Imports - Home](https://jjcasanoimports.com)**
>
> JJ Casano Imports is a premium Italian wine Importer. Discover the taste of Italy with our expertly curated selection of high-quality Italian wines, sourced directly from the country’s most renowned vineyards.

I have been experimenting in Elements and trying to rebuild this web site but, so far I have been unsuccessful and it has been extremely frustrating. Perhaps Elements is not capable of this kind of layout design yet? I need to be able to overlap graphic elements. Is this even possible in Elements? I have attached some examples below.

 ![Screenshot 2026-03-06 at 4.10.56 PM](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/9/e/9e2deb43ececfc9eb2d79aacb658fe02894bc65e.jpeg)

 ![Screenshot 2026-03-06 at 4.02.34 PM](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/e/e/ee86e8233bc52315c7ea41b36b11390bd33e7c6b.jpeg)

 ![Screenshot 2026-03-06 at 4.07.39 PM](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/c/3/c355e11162b7863a18f48bc167f2befc63c0cdc9.jpeg)

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [March 8, 2026, 8:13pm UTC](https://forums.realmacsoftware.com/t/creating-responsive-overlapping-image-layers/54912/2 "2026-03-08T20:13:56Z")

</div>

the first is just using Elements with a little code in advanced section, the second is a custom component, 6 lines of code and some properties (a little hooks)

---

<div class="post-metadata">

**Author:** ![Pegasus](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/pegasus/32/25035_2.png) [@Pegasus](https://forums.realmacsoftware.com/u/Pegasus)\
**Post date:** [March 8, 2026, 8:42pm UTC](https://forums.realmacsoftware.com/t/creating-responsive-overlapping-image-layers/54912/3 "2026-03-08T20:42:05Z")

</div>

@upssjw

It’s always a pleasure to watch you at work.

---

<div class="post-metadata">

**Author:** ![jbob](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/jbob/32/31581_2.png) [@jbob](https://forums.realmacsoftware.com/u/jbob)\
**Post date:** [March 9, 2026, 9:38am UTC](https://forums.realmacsoftware.com/t/creating-responsive-overlapping-image-layers/54912/4 "2026-03-09T09:38:17Z")

</div>

Fab UPS - do we need an extra component to do this ?

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [March 9, 2026, 10:00am UTC](https://forums.realmacsoftware.com/t/creating-responsive-overlapping-image-layers/54912/5 "2026-03-09T10:00:10Z")

</div>

the first video was just using Elements and the second video I created was a small custom component

---

<div class="post-metadata">

**Author:** ![jenkman](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/jenkman/32/5003_2.png) [@jenkman](https://forums.realmacsoftware.com/u/jenkman)\
**Post date:** [March 9, 2026, 1:50pm UTC](https://forums.realmacsoftware.com/t/creating-responsive-overlapping-image-layers/54912/6 "2026-03-09T13:50:16Z")

</div>

is it possible to provide the project file for the first example?

---

<div class="post-metadata">

**Author:** ![ticknerdesign](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ticknerdesign/32/33805_2.png) [@ticknerdesign](https://forums.realmacsoftware.com/u/ticknerdesign)\
**Post date:** [March 9, 2026, 2:19pm UTC](https://forums.realmacsoftware.com/t/creating-responsive-overlapping-image-layers/54912/7 "2026-03-09T14:19:17Z")

</div>

upssjw, this is absolutely incredible! Thank you so much for proving that this can indeed be done in Elements. Can you share the code for the custom component you created for the second video? Or create a demo video showing how and where the code is created and placed inside Elements? This is so exciting! 🤩

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [March 9, 2026, 7:45pm UTC](https://forums.realmacsoftware.com/t/creating-responsive-overlapping-image-layers/54912/8 "2026-03-09T19:45:30Z")

</div>

one way to do this, there are otherways - Elements version

added animation, changed bg color thought it might show up better as overlap

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [March 9, 2026, 8:07pm UTC](https://forums.realmacsoftware.com/t/creating-responsive-overlapping-image-layers/54912/9 "2026-03-09T20:07:57Z")

</div>

[https://forums.realmacsoftware.com/t/creating-responsive-overlapping-image-layers/54912/8?u=upssjw](https://forums.realmacsoftware.com/t/creating-responsive-overlapping-image-layers/54912/8)

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [March 10, 2026, 5:54am UTC](https://forums.realmacsoftware.com/t/creating-responsive-overlapping-image-layers/54912/11 "2026-03-10T05:54:30Z")

</div>

the previous positioning was movement about the image itself, this is within the main area, as before different ways

---

<div class="post-metadata">

**Author:** ![ticknerdesign](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ticknerdesign/32/33805_2.png) [@ticknerdesign](https://forums.realmacsoftware.com/u/ticknerdesign)\
**Post date:** [March 10, 2026, 3:22pm UTC](https://forums.realmacsoftware.com/t/creating-responsive-overlapping-image-layers/54912/12 "2026-03-10T15:22:08Z")

</div>

Bummer. I am getting an error when I try to download the file. =(

 ![Screenshot 2026-03-10 at 11.21.08 AM](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/c/c/ccf7672961d03a38655d240f826ac5bf99fbc05c.png)

---

<div class="post-metadata">

**Author:** ![PMUK](https://avatars.discourse-cdn.com/v4/letter/p/7993a0/32.png) [@PMUK](https://forums.realmacsoftware.com/u/PMUK)\
**Post date:** [March 10, 2026, 4:41pm UTC](https://forums.realmacsoftware.com/t/creating-responsive-overlapping-image-layers/54912/13 "2026-03-10T16:41:31Z")

</div>

You have to be quick as the files are only up for a limited time. This just means the files been deleted from Elements cloud.

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [March 10, 2026, 4:52pm UTC](https://forums.realmacsoftware.com/t/creating-responsive-overlapping-image-layers/54912/14 "2026-03-10T16:52:57Z")

</div>

project - [elementsapp://downloadDocument/SyYWYPY2R9sn](elementsapp://downloadDocument/SyYWYPY2R9sn)

ok I added more animation, you can just move each one out of the reveal and then delete the reveal, again this was percentage move based on the size, the second video was based on move in the maintainer container distance

original how to

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [March 10, 2026, 5:32pm UTC](https://forums.realmacsoftware.com/t/creating-responsive-overlapping-image-layers/54912/15 "2026-03-10T17:32:51Z")

</div>

this was positioned the second way I showed, using container size, if you overlap off the screen you will need to add overflow-x-clip as per first project

project - [elementsapp://downloadDocument/nMhEwCaVZqb1](elementsapp://downloadDocument/nMhEwCaVZqb1)

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [March 10, 2026, 9:57pm UTC](https://forums.realmacsoftware.com/t/creating-responsive-overlapping-image-layers/54912/16 "2026-03-10T21:57:09Z")

</div>

> [@PMUK](#):
>
> You have to be quick as the files are only up for a limited time. This just means the files been deleted from Elements cloud.

Just to clarify; the project files stay online in Elements Cloud until the original user deletes them from their account.

I think @upssjw often deletes his files as he’s low on space.

---

<div class="post-metadata">

**Author:** ![PMUK](https://avatars.discourse-cdn.com/v4/letter/p/7993a0/32.png) [@PMUK](https://forums.realmacsoftware.com/u/PMUK)\
**Post date:** [March 10, 2026, 10:24pm UTC](https://forums.realmacsoftware.com/t/creating-responsive-overlapping-image-layers/54912/17 "2026-03-10T22:24:31Z")

</div>

Dan thanks I know that I was trying to convey to the person why they couldn’t download it. Steve has been doing this for months.

---

<div class="post-metadata">

**Author:** ![ticknerdesign](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ticknerdesign/32/33805_2.png) [@ticknerdesign](https://forums.realmacsoftware.com/u/ticknerdesign)\
**Post date:** [March 17, 2026, 9:26pm UTC](https://forums.realmacsoftware.com/t/creating-responsive-overlapping-image-layers/54912/18 "2026-03-17T21:26:32Z")

</div>

Apparently I am **NOT** quick enough! LOL… I will do my best and try to figure this out by watching the videos as closely as possible. 🫣

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [March 17, 2026, 10:39pm UTC](https://forums.realmacsoftware.com/t/creating-responsive-overlapping-image-layers/54912/19 "2026-03-17T22:39:44Z")

</div>

I will leave it here for 24 hours, was still in my bin, will delete tomorrow

I have no space left on cleanshot and I use my cloud so need the space

[elementsapp://downloadDocument/t8sL2O5Wllub](elementsapp://downloadDocument/t8sL2O5Wllub)

Remove this flex it was something else I was working on

---

<div class="post-metadata">

**Author:** ![ticknerdesign](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ticknerdesign/32/33805_2.png) [@ticknerdesign](https://forums.realmacsoftware.com/u/ticknerdesign)\
**Post date:** [March 18, 2026, 10:24am UTC](https://forums.realmacsoftware.com/t/creating-responsive-overlapping-image-layers/54912/20 "2026-03-18T10:24:25Z")

</div>

> [@upssjw](#):
>
> elementsapp://downloadDocument/t8sL2O5Wllub

Got it, Steve! Thank you so much! 6:23 A.M.

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [March 18, 2026, 1:58pm UTC](https://forums.realmacsoftware.com/t/creating-responsive-overlapping-image-layers/54912/21 "2026-03-18T13:58:06Z")

</div>

If you need any further help just let me know
