This content originally appeared on CodyHouse and was authored by CodyHouse
Download + Demo
How To
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 .poi__btn
element.
The position of each point can be set using top/right/bottom/left in the inline style attribute of the .poi__item
element:
<li style="top: 10%; left: 50%;" class="poi__item js-poi__item">
<!-- button element here -->
</li>
Important: use percentage values to preserve the position of the point of interest when the image resizes at different breakpoints.
This content originally appeared on CodyHouse and was authored by CodyHouse
CodyHouse | Sciencx (2021-10-05T10:24:19+00:00) Component – Image Interest Points. Retrieved from https://www.scien.cx/2021/10/05/component-image-interest-points/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.