Mouse-over effects add interactive elements to your images, displaying information or creating movement when visitors hover their cursor. Here's how to implement them effectively:

Image Blocks

To add hover captions:

1. Open or add a new Image Block
2. Select "Inline" in the Design tab
3. Choose "Overlay caption on hover" from Caption menu in Content tab
4. Hover over image and click "Add image description"
5. Enter your caption and save

Slideshow Gallery Blocks

To enable hover effects:

1. Open or add a Slideshow Gallery Block
2. Click Content tab and hover over image
3. Add title and description
4. In Design tab, enable "Show title and description"
5. Select position from dropdown menu
6. Enable "Show on hover"
7. Apply changes

Note: Hover captions work on devices wider than 480 pixels.

Portfolio Pages

Available hover layouts:

• Mouse-over: background - Shows full-size project image on title hover
• Mouse-over: fixed - Displays smaller project image in fixed position
• Mouse-over: follow cursor - Project image follows cursor movement

Store Pages

Hover effects vary by version:

• Version 7.1: Shows alternative product image on hover
• Version 7.0: Displays product details, preview buttons, or fade effects depending on template

Gallery Pages (Version 7.0)

Enable hover effects:

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

Supported template families include:

• Adirondack
• Aviator
• Bedford
• Brine
• Farro
• Five
• Galapagos
• Native
• Pacific
• Skye
• York

Index Pages (Version 7.0)

Template-specific effects:

• Avenue: Opacity change and navigation title display
• Flatiron: Image zoom and pan
• Montauk: Opacity change
• Tremont: Background image display
• York: Fade effects and title display

Note: Mobile devices display hover effects through touch or long press, depending on the device and screen size.

Related Articles

Previous Articles