Just wondering if anyone has ever tried or even if it is possible to align elements to internal spots of an image?
(Mostly trying to understand how Editor X resizes images when fully stretched or given 100% values on either X/Y axis)
Example (see attached): I’ve got an image with a frame in the centre (included in the single image) where I want to place my responsive element (container) to follow responsively as the image resizes.
- I could add the blue frame as a different img element however I won’t be able to align the blur effect behind it from the animated characters (not to mention that this was being planned on being a video)
- The container is needed for placing text inside and alignment is needed.
Cheers in advances mates for reading.
- I’m able to achieve horizontal alignment when setting up a grid within section with outer columns/rows given a viewport height/width. Depending on the size of the image it varies.
For instance:
- When height of image is let auto where width is 100% I get height alignment with container while resizing viewport
- When adjusting section to required height and having 100% width & height on image (basically stretched), i do achieve vertical alignment.
I tried setting something in between those values but there’s no sweet spot obviously since this is meant to be responsive. Giving the image a fixed pixel height does not work either.
I’ll probably end up adding the middle image part as a secondary element stretched inside a container in the end but asking in case someone knows so I can retain the blurry effect behind it (rather than just opacity effect)
Actually may have a solution here again:
- No grids needed, just the container floating in the middle with Viewport width values on height & width.
Seems to be responsive on my larger desktop view. Some trialling and image resizing will be needed as after a while it seems to crop if height is fixed.
Will check smaller viewports later on as I’m working on some other thingos atm.
