Apply hover effects to images in your site to enhance user experience through interactive elements. Here's how to implement them in different blocks and pages:

Image Block Hover Effects

1. Open or add a new image block
2. Select [Design] tab > [Inline]
3. Go to [Content] tab
4. Choose [Overlay caption on hover]
5. Add caption by clicking [Enter caption here...]

Slideshow Gallery Hover Effects

1. Open or add slideshow gallery block
2. Click image in [Content] tab
3. Enter title and description
4. Go to [Design] tab
5. Enable [Show title and description]
6. Select position from dropdown
7. Enable [Display on hover]

Note: Hover effects may not display on mobile devices under 480px.

Portfolio Page Options

Choose from three hover layouts:

• Hover: Background - Shows project title with full background image on hover
• Hover: Fixed - Displays smaller fixed image on hover
• Hover: Follows Cursor - Shows smaller image that follows cursor

Store Page Features

Version 7.1 & 7.0:

• Shows alternative product images on hover
• Different templates offer unique overlay options:
  • Advanced: Secondary images, product details, quick view
  • Classic: Product name and price overlay
  • Galapagos: Alternative images and information
  • Supply: Custom information overlay

Gallery Page Support

Available in templates:

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

To Enable Gallery Hover Effects:

1. Open site styles
2. Navigate to [Gallery styles]
3. Select [Slideshow] or [Grid]
4. Choose [Show on hover] for overlays

Template-Specific Effects

Forte:

• Navigation arrows on carousel hover
• Sliding captions for longer descriptions

Momentum:

• Full-screen navigation arrows

Tremont:

• Caption display on hover

Wexley:

• Title and color overlay on hover

Index Page Features

Different templates offer unique hover effects:

• Avenue: Opacity change and navigation title
• Flatiron: Image zoom and pan
• Montauk: Opacity transitions
• Tremont: Background image display
• York: Title display with image fade

Related Articles

Previous Articles