Interactive Info Images

Overview
The Interactive Info Images component is a custom AEM feature that displays animated, interactive image panels revealing text on hover.

Interactive Info Images The Interactive Info Images The Interactive Info Images

The Interactive Info Images component is a custom AEM component that allows users to display animated interactive image panels that reveal textual info content when hovered on.

Features

Interactive image panels that reveal content on hover.
Ability to add multiple items, each consisting of an image and its content.
Only one content box is visible at a time when multiple items are present.
Option to navigate content by hovering over different images.
Supports title, text, and buttons for links within the content.
Customizable animation effects.
Responsive design ensuring proper display on all screen sizes.

Functionality

Each item consists of an image and its content.
By default, the content is hidden behind the image.
When hovering over the image, the content appears and disappears when not hovering.
Multiple items can be added; only one content box is visible at a time.
Option to navigate through content by hovering over different images.
The content includes:
- Title
- Text
- Buttons (for links with styling options)

Dialog Properties

1. General Configuration

activeItemPosition – Option to input the number corresponding to the position of the item you wish to be opened initially.
Child Elements – Option to add multiple items.
- Image – Option to add Right Side Image.
- Title – Option to add Title for the content on the left side.
- Text – Option to add Description for the content on the left side.
- Button Text – Label for button.
- Url – Link for button.
- Open In New Window – Decide whether the link opens in a new window or not.
- Add nofollow – Decide whether the button link should have a nofollow attribute.

2. Button Configuration

Layout – Option to set layout for button:
- Filled – Button displays with background and outline.
- Outlined – Button has an outline but no background color.
- Textual – Button displays without background and outline.
Type – Adds extra features to the button:
- Standard – No extra styles apply to button.
- With Inner Border – Adds an inner border to button.
- Icon Boxed – Sets an icon inside a box (icon appears alongside the button).
Size – Option to set button size:
- Normal – Default button size.
- Small – Smaller than normal.
- Large – Larger than normal.
- Normal Full Width – Normal size but spans the full width.
Enable Button Text Underline – Option to enable underline for button.

(Note: Type and size are not visible if Layout = Textual.)

3. Button Icon Configuration

Icon – Option to add an icon alongside the button.
Icon Position – Option to set the position of the icon relative to the button:
- Right – Icon appears to the right of the button.
- Left – Icon appears to the left of the button.

Usage Instructions

Add the component to an AEM page.
Configure images and content for each item.
Customize styling and effects based on preferences.
Preview and publish to see the interactive images in action.

Additional Notes

Ensure images are optimized for better performance.
Use contrasting styles to enhance visibility and user experience.

Conclusion

This component enhances user engagement by adding interactive elements to images, making content visually appealing and informative. It provides flexibility and ease of customization within AEM’s authoring environment.

Take the next step

Curious but Not Convinced? Reach out to us! Let’s build something extraordinary together. Partner with us and discover the difference.

Bite sized conversation

Business Enquiry

Send us a email

General Enquiry

Send us a email saying hello

Social connect