Mouseover effects add interactivity to your images, displaying information or creating movement when visitors hover their cursor over them. Here's how to implement them effectively across different site elements.

Image Blocks

1. Open or add a new Image Block
2. Select "Inline" in the Design tab
3. Choose "Overlay caption on mouseover" from Caption menu
4. Add your description in the black overlay that appears
5. Save and test the mouseover effect

Slideshow Gallery Blocks Mouseover Features:

• Display titles and descriptions on hover
• Works on devices wider than 480 pixels
• Mobile devices show captions on tap or long press

To Set Up Slideshow Gallery Mouseover:

1. Open or add a Slideshow Gallery Block
2. Add title and description in Content tab
3. Enable "Show title and description" in Design tab
4. Choose position for title/description
5. Select "Show on mouseover"
6. Apply changes

Portfolio Page Mouseover Options:

• Background: Shows project titles with full-width image background on hover
• Fixed: Displays smaller project images in set position
• Follow cursor: Project images follow cursor movement

Store Page Mouseover Features:

• Shows alternative product images on hover
• Displays product details or fade effects
• Preview button options available
• Color overlay effects for product information

Gallery Page Mouseover Support:

• Available in multiple templates including Adirondack, Aviator, Bedford
• Works with Slideshow and Grid designs
• Shows titles and descriptions on hover
• Mobile devices display captions on tap

Index Page Special Effects:

• Opacity changes on hover
• Image enlargement and panning
• Background image display
• Thumbnail title reveal
• Custom fade effects

Best Practices:

• Test mouseover effects on different devices
• Ensure text is readable against image backgrounds
• Keep animations subtle and professional
• Consider mobile user experience
• Maintain consistent styling across similar elements

These mouseover effects enhance user engagement while maintaining clean design aesthetics, perfect for creating interactive but uncluttered layouts.

Related Articles

Previous Articles