Mouseover effects create interactive visual experiences when users hover over images on your website. Here's how to implement them across different website elements:

Image Blocks

1. Open or add an image block
2. Select Design tab and choose Inline
3. Go to Content tab
4. Select "Caption Overlay on Mouseover" from Caption menu
5. Enter caption text when hovering over the block

Slideshow Gallery

1. Open or add slideshow gallery block
2. Hover over image and click settings
3. Add title and description
4. In Design tab, enable "Show title and description"
5. Choose position for text
6. Enable "Show on mouseover"

Note: Mouseover captions may not display on mobile devices under 480px.

Portfolio Pages

Three mouseover layout options available:

• Background: Project titles with full-background image on hover
• Fixed: Project titles with fixed-position image on hover
• Follow cursor: Project titles with cursor-following image on hover

Shop Pages

Behavior varies by template:

• Advanced: Shows secondary image, product details, or quick view
• Classic: Displays product name/price over color overlay
• Galapagos: Custom image alternatives and info overlays
• Supply: Specialized product information overlays

Gallery Pages

Available effects for slideshow and grid layouts:

• Title/description display on hover
• Navigation arrows
• Lightbox preview
• Color overlays
• Caption animations

Index Pages

Template-specific effects include:

• Opacity changes on hover
• Image enlargement
• Background image swaps
• Title reveals
• Pan animations

For all mouseover effects, ensure your design remains accessible and functions appropriately across different devices and screen sizes.

Related Articles

Previous Articles