Hi all!
On my website, I have a hero image (SVG format) with an illustration and lots of shapes. I have this here for reference.
Below this, there is another section and I am attempting to “recreate” the above illustration. I have each of these illustrations separated out into individuals SVG files. I would like to position them so that they are arranged just like they are in the current hero image.
I’ve tried everything I can think of. Right now you’ll find that the images are housed in a DIV (position: relative) and then the images are absolute. I can get the first row of shapes perfectly set (because they are positioned along the bottom of the DIV) - but the second row of shapes (i.e. the yellow circle I’ve already placed on the page) are trickier because when the window is resized they are no longer where they should be.
Is there any way to accomplish this??
Just as FYI - the reason I’m trying is because I want to use interactions on these individual elements.
Here is my site Read-Only: https://preview.webflow.com/preview/wpg?utm_source=wpg&preview=c2d37be89ae73934deca64c04921b2e8