Item 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
Item 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
Item 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
Item 4
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
Item 5
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
Instructions
- It is important that the elements in both lists have the same order so that the index of the target elements ('.hover-tabs_image') corresponds to the index of the triggers ('.hover-tabs_list-item').
- When a trigger element is hovered over, the class name '.is-active' is added to both itself and the target element with the same index.
- Customize the nested class '.is-active' as desired ('hover-tabs_image.is-active' and 'hover-tabs_list-item.is-active').
- Check the mobile breakpoints to customize the images accordingly.
- Don't forget to copy the custom code from the home page settings to your project.
