Responsive Image Annotations

How do you position markers on top of an image responsively, so that when the image is resized, the markers stay in place?

I refer to this technique as relative-absolute positioning, and it involves a particular characteristic of how CSS positioning works.

• Position the outer frame as _relative
• Position the inner markers as _absolute

... and the markers will be absolutely positioned within the relative parent.

If you want to prevent the markers from interfering with mouse clicks and user interactions with the underlying element, you can apply CSS's _{pointer-events: none} property.

This also works with video.

• See Mike Yelvin's post
• See a demonstration - CSS Tricks

Demonstration Project

Check out these links to explore the demo project.

• Demo site
• Demo project

Notes

• Master Absolute Positioning - Vincent Bidaux