Image Hover Box
The Image Hover Box is an interactive reveal container that, upon page load, contains an image with title superimosed at the bottom margin. Upon hover by mouse, a copy block pops up on top of the image, enabling the prospect to click on a call to action button. This component may have anywhere from 2 to 5 cards and is only permitted in the full-width template.
Screenshot of Existing Site
Screenshot of AEM Author Touch UI
Author Instructions
Insert the Image Content Block at the Parsys-level.
To configure the container:
- Click inside the component to configure the container.
- Configure the number of Columns (2, 3, 4, or 5)
- Set the component's Title and Description.
- Click the checkmark to save your changes.
To configure each column:
- Double-click on the column container.
- Find the resized visual asset from the sidekick and drag into the container.
- Select the primary focal point of the image (Left, Center, or Right)
- Enter the title of the container.
- Enter the description (body copy)
- Select the Background color of the column.
- Enter the Button CTA copy and alt text
- Select link destination and target.
- Select the checkmark to commit changes.
Note: This component requires delicate management of the visual assets. Ensure the end-result matches the live site as close as possible.
AEM Component (Actual)