Can 2 stacked images of different sizes be locked?

I have 2 stacked images of different sizes, and they need to remain locked together (no visible shift) at any screen width. Is this possible?

Before you suggest to just make it a single image, I’m hopi g to have more images the same size as the top one to stack and switch out, so I’m hoping if I can get these to lock, the rest (hopefully) will be easy.


Here is my site Read-Only: https://preview.webflow.com/preview/910zen-2019-a9-46cff02c3d5607b782bd5075?utm_medium=preview_link&utm_source=dashboard&utm_content=910zen-2019-a9-46cff02c3d5607b782bd5075&preview=282032d39d2e507a61d6072c800eb44b&mode=preview
(how to share your site Read-Only link)

Make one a background image of a div with “position:relative” and the other an image within that div with “position:absolute” and a higher Z value. Then use % width/height on the image within and position it where you need it. Should scale with the background image that way.

1 Like

Thanks Fonsume!

This was actually pretty close to what I was doing, however if you look at my Webflow settings, something must be wrong, since these things seem to slide around depending on height of browser as well as width. (see link below as well as added to the initial post).

Any advice would be great!

https://preview.webflow.com/preview/910zen-2019-a9-46cff02c3d5607b782bd5075?utm_medium=preview_link&utm_source=dashboard&utm_content=910zen-2019-a9-46cff02c3d5607b782bd5075&preview=282032d39d2e507a61d6072c800eb44b&mode=preview

Took a shot at it:

https://preview.webflow.com/preview/picture-on-picture?utm_medium=preview_link&utm_source=designer&utm_content=picture-on-picture&preview=749b8e7dbbeac656fdae4581f1be6fd4&mode=preview

I separated the monitor from the stand, made the monitor see-through and put it in a div that uses the desired picture the background (link it to a CMS list if needed).

Seems to be working. You should probably tinker a bit with the placements and sizes I guess :slight_smile:

1 Like

Thanks @Fonsume. It does manage to keep the monitor/stand together, but there are issues with scaling and placement (I’m guessing this is what you meant my placement and sizes). I’ll mess with this a bit and get back later on any success or more confusion. Thanks for you help!

Quick question @Fonsume… Why did you break it up the way you did? ie…

  • transparent monitor chunk
  • stand
  • screen

I’m just trying to understand your logic and why mine doesn’t work.

Thanks!
Tait

Hey Tait

Take a look at this Webflow Project. Looks like you are trying to achieve similar results :grinning:

I cut it up for time saving reasons pretty much. The image of the monitor top w/transparency (and the div it’s in) is pretty much the same aspect ratio as the picture displayed on it, so putting the picture as the background image for the div made it fit in the screen nicely. If I used the full monitor image with the stand the aspect ratio would be messed up. There are probably other/better ways of doing it :slight_smile:

1 Like

Ah! Good to know the reasoning. Thank you!

Thanks! Anxious to try anything that will work. Won’t have time to dig in again until tomorrow, but I’ll get back, thanks for taking them time to help.