Content Controls
Image
In this section, you can upload your chosen image, adjust its size for optimal viewing, provide alternative text for SEO benefits, and enable lazy loading to improve page load performance.
- Image – Upload or choose an existing image from your media library.
- Size – Select the display size of the image. (Note: This control is available only when an image is selected.)
- Alt – Provide alternative text for the image, enhancing SEO and accessibility. (Note: This control is available only when an image is selected.)
- Lazy Load – Toggle to delay the loading of the image until it’s needed, enhancing page load speed. (Note: This control is available only when an image is selected.)
Captions
This section allows you to add and style captions, apply captivating effects, control their timing, and determine their position to create engaging image hover cards.
- Captions – Add multiple captions to your image.
- Text – Specify the text for each caption.
- Effect – Choose an animation effect for the caption when the image is hovered over.
- Delay – Set a time delay for the animation effect, enhancing the user’s visual experience.
- Position – Select the position on the image where the captions will be displayed.
- Tag – Choose the HTML tag that best represents the importance of the captions for SEO purposes.
Link
Direct your audience to more content or a different page by adding a clickable link to your image hover card.
- Link – Specify the URL you want to link your image to, whether it’s a page within your site or an external destination.
Design Controls
Size
Control the width of the image hover card to ensure it fits perfectly within your site’s layout.
- Width – Set a specific width for the image element, making it harmonious with your page design.
Overlay
Customize the overlay that appears on hover by adjusting its color and how opaque or transparent it is, adding depth to your image hover card.
- Overlay Color – Select a color for the overlay that complements your image and website’s color scheme.
- Opacity – Adjust the overlay’s opacity to strike the right balance between visibility and image clarity.
Effects
Add visual appeal to your image hover card with special effects for the image and border, then fine-tune the border’s appearance and transition duration for a smooth user experience.
- Image Effect – Choose an effect that will be applied to the image on hover, like zooming or panning.
- Border Effect – Select an animation for the border when the image is hovered over, such as expanding or fading edges.
- Border Width – Specify the thickness of the border for a balanced look.
- Border Color – Pick a border color that suits your design aesthetic.
- Transition Duration – Set the time it takes for the hover transition to complete, ensuring a fluid visual effect.
Typography
Define the typography of the captions to ensure they’re readable and aesthetically pleasing, complementing your site’s design.
Spacing
Adjust the spacing above and below your image hover card to ensure it integrates neatly with the rest of your page content.
- Margin Top – Set the space above the image hover card to enhance visual separation and balance.
- Margin Bottom – Set the space below the image hover card to maintain consistency and flow in your layout.
