Image Interest Points
Highlight the points of interest of an image and provide additional details for each one.
All components are based on CodyFrame.
If you're using this component, you should also include the SCSS/JS of the following components:
The Image Interest Points component is used to mark the points of interest of an image; each point opens a modal window with additional information.
To connect each point of interest to a modal window, make sure the
id value of the modal is equal to the
aria-controls value of the
The position of each point can be set using top/right/bottom/left in the inline style attribute of the
<li style="top: 10%; left: 50%;" class="poi__item js-poi__item">
<!-- button element here -->
Important: use percentage values to preserve the position of the point of interest when the image resizes at different breakpoints.