Responsive image annotations

+ Create and position elements over top of an image.
+ Maintain those positions relative to the image as the screen and underlying image resize & reposition in your layout.
+ Clickable annotations
+ Animation possibilities using Webflow Interactions
+ Custom annotation design including text, SVG icons, etc.
- No in-built CMS or database support for the annotations is easily implemented.

DEMO #1

Features...

+ Create and position elements over top of an image.
+ Maintain those positions relative to the image as the screen and underlying image resize & reposition in your layout.
+ Clickable annotations
+ Animation possibilities using Webflow Interactions
+ Custom annotation design including text, SVG icons, etc.
- No in-built CMS or database support for the annotations is easily implemented.

Overlay annotation elements on top of an image, and maintain those positions responsively as the image size changes.

See the designer view of this demonstration by clicking the button at the top.
Then view this part of the layout for details;

Outer DIV is Relative

Photo inside is Block, 100% width

Annotations are positioned % from Left and Top, and can be adjusted in the designer for precise positioning.

Note responsive sizing of the labels, as the image will get small.

Annotations are square aspect for simplicity, but don't necessarily need to be.

Dealing with variable sized labels.

May require direct CSS mods to allow for math.

Idea- a 0x0 outer frame which controls position. An inner frame which offests -50%w -50%h for positioning.

‍