Mouse hover effects add interactive animations to images, making your site more engaging. Here's how to implement them across different content types:

Image Blocks

To add caption overlays on hover:

1. Add/open an Image Block
2. Select "Inline" in Design tab
3. Choose "Caption overlay" under Content > Caption
4. Enter caption text
5. Save changes

Slideshow Gallery Block

Enable hover titles and descriptions:

1. Add/open Slideshow Gallery Block
2. Click content editor (.) for image details
3. Add title and description
4. Select "Show Title and Description" in Design tab
5. Choose description position
6. Enable "Show on mouse hover"
7. Apply changes

Note: Mobile devices under 480px won't show hover effects. Larger devices show captions on tap.

Portfolio Pages

Available hover layouts:

• Background: Project titles with full-screen image background on hover
• Fixed: Project titles with static positioned image on hover
• Follow cursor: Project titles with cursor-following image on hover

Store Pages

Hover effects vary by version:

• 7.1: Shows alternate product image on hover
• 7.0: Displays secondary images, product details, or fade effects
• Advanced stores: Secondary images with Quick View
• Classic stores: Overlay with product info
• Galapagos: Custom overlay options
• Supply: Product information overlays

Gallery Page (7.0)

Enable hover effects in supported templates:

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

Template-specific effects:

• Forte: Navigation arrows and sliding captions
• Momentum: Full-screen arrow navigation
• Tremont: Caption display
• Wexley: Title and color overlay

Index Pages (7.0)

Template-specific hover effects:

• Avenue: Opacity changes and navigation titles
• Flatiron: Enlarged thumbnails with details
• Montauk: Opacity transitions
• Tremont: Background image preview
• York: Fade effects with titles

Related Articles

Previous Articles