Hi there,
I was wondering, is there a way to pin an image’s position to another image? For example, I have an image with a white background, a blue square, and a red outline. On top of that I have placed an image of a green square that matches the dimensions of the blue square, which obscures the blue completely.
I’m hoping to have this content respond to browser size and keep the squares aligned so the blue stays completely obscured and the red outline is fully visible. However, when I adjust the page width, the green square’s position goes out of alignment and the blue square becomes visible.
Is there a way that I can keep the second image’s position the same relative to the first while allowing both to scale to any page width, i.e. pinning it to the image below and scaling it all as a whole? Ideally I would like to create a page where certain buttons look like they are part of the image behind it, but inverts color when the user’s mouse hovers over the button. I have this Mac II-style taskbar and I’d like the “Back To Home” and the rectangular area around it to invert when hovered.
It works great when using only one set page width, but as soon as things are scaled to a new width, everything gets thrown off.
Thanks!
EDIT: I have found a solution that works for me so far. If anyone comes across this post with a similar issue, here’s the secret:
First, you want to make a container box exactly the size of the “background” image and set it to “Fluid” under the sizing options. I set a Max Width and Height to match the background image I want to place on it, but I don’t know if this is necessary. Next, attach the image to the box and adjust the size so it fits exactly. Set that image’s sizing to fluid and make sure the Height is set to Auto, Min Width and Height are set to None, and Max Width and Height are set to the image’s dimensions in pixels. Check “Scale Proportionally” and dock the image to the top and sides of the container box. Make sure all the margins are set to zero and that you are in fact attached and docked to the container box rather than the section, page, or parent element containing it.
What this has done is essentially created a canvas for us to stick whatever we want to it. Since images can’t be used as docking points themselves, we have hidden an element that can be used for our purposes right behind the background image.
Now, place your next image on top of the background image. Make sure this is also attached to the container box. Width and Height should be set to Auto, Min W and H to None, and Max W and H to the image’s dimensions. Check the “Scale Proportionally” box here as well, then dock the image to the container box’s top and sides. If you drag and drop the image to where you want it and it’s in the lower half of the container box, it will switch automatically to docking to the bottom, which has caused issues for me. Luckily this can be overridden. Now, MAKE SURE THE MARGINS ARE SET TO PERCENTAGES! This scales images in relation to the scaled dimensions for your background image/container and essentially sticks them in place while scaling the composition as a whole.
Sorry if this is newbie stuff that everyone knew already, but I came from using Wix in search of something with a drag-and-drop interface that also allows for fully responsive scaling. I feel that I’m not the only one around here that wants more functionality than Wix but lacks a lot of the knowhow to jump right into Editor X without any issues.