Creating responsive overlapping image layers

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 by 1LD. It is by far my favorite add-on Stack and I used it liberally for my latest web design project.

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.

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)

@upssjw

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

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

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

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

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! :star_struck:

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

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

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

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

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

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.

project - 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

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

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.

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.

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. :face_with_peeking_eye:

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

Remove this flex it was something else I was working on

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

If you need any further help just let me know