Toggle project menu
Feeling lost? Feel free to get in touch!
Highlight the points of interest of an image and provide additional details for each one.
All components are compatible with CodyFrame, Tailwind CSS or any other CSS framework.
To use this component, include the following dependencies:
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 -->
Important: use percentage values to preserve the position of the point of interest when the image resizes at different breakpoints.
Component Github page ↗
Each month we email a 1-minute CSS tutorial to 20K developers
Awesome! We just sent you a confirmation link by email
Error - please try again or contact us
Your email address is already subscribed
Create a CodyHouse account to unlock members-only features and join our community of web designers!
Error: email or password not valid. Need help? Contact us.
or create an account
There was an error while trying to export your project. Please try again or contact us.