Create image hover effects on your site to display information or add movement when visitors interact with images. Learn how to implement hover effects across different block types and page layouts.

Image Blocks

To add hover captions to Inline Image blocks:

1. Open or create an Image block
2. Select Inline from the Creation tab
3. Choose Hover Caption Overlay from the Caption dropdown menu
4. Click "Write a caption here..." in the overlay to add text

Slideshow Gallery Blocks

Enable hover effects for titles and descriptions:

1. Create or open a Slideshow Gallery block
2. Click the content editor icon on any image
3. Add title and description
4. Go to Design tab
5. Enable "Show title and description"
6. Select position and "Show on hover"

Note: Hover captions may display differently on mobile devices (< 480px width).

Portfolio Pages

Choose from these hover-enabled layouts:

• Hover: Background - Shows project images as section backgrounds
• Hover: Fixed - Displays smaller images in fixed positions
• Hover: Follow Cursor - Images follow cursor movement

Shop Pages

Hover effects vary by version:

• Version 7.1: Shows alternate product images on hover
• Version 7.0: Displays product details, Quick View buttons, or custom overlays depending on template

Gallery Pages (Version 7.0)

Enable hover effects in Site Styles for supported templates:

1. Open Site Styles panel
2. Navigate to Gallery Styles
3. Select Slideshow or Grid design
4. Choose "Show on hover" for overlays

Supported templates include: Adirondack, Aviator, Bedford, Brine, Farro, Five, Galapagos, Native, Pacific, Skye, and York.

Index Pages (Version 7.0)

Special hover effects available in select templates:

• Avenue: Opacity changes and navigation titles
• Flatiron: Image zoom and pan
• Montauk: Opacity transitions
• Tremont: Background image display
• York: Fade effects with title display

For best results, test hover effects across different devices and screen sizes to ensure optimal visitor experience.

Related Articles

Previous Articles