Mouse hover effects can transform your website by making images interactive and engaging. Here's how to implement them effectively across different site elements.

Image Blocks

• Use Inline Image blocks to display captions on hover
• Create or open an Image block
• Select Inline from the Create tab
• Choose "Caption overlay on hover" from the Caption menu
• Add your caption text by clicking "Write a caption here..."

Slideshow Gallery Blocks

• Display titles and descriptions on hover
• Create or open a Slideshow Gallery block
• Click images to add titles and descriptions
• Enable hover effects in Design tab
• Select "Show title and description"
• Choose position and "Show on hover"
• Note: Hover effects don't work on mobile screens under 480px

Portfolio Pages Choose from these hover layouts:

• Background: Project titles with full-screen image background
• Fixed: Project titles with fixed-position smaller images
• Follow cursor: Project titles with cursor-following images

Store Pages Features

• Multiple product images switch on hover
• Advanced Store Pages: Secondary images, product details, Quick View button
• Classic Store Pages: Colored overlay with product details
• Galapagos: Custom image overlay options
• Supply: Product information overlay options

Gallery Pages Supported in templates like:

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

Customize hover effects through Site Styles:

• Slideshow: Enable "Show on hover" for titles and descriptions
• Grid: Hover effects in lightbox view

Special Template Effects

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

Index Pages Template-specific effects:

• Avenue: Opacity changes and navigation titles
• Flatiron: Zoom and pan effects
• Montauk: Opacity transitions
• Tremont: Background image switching
• York: Fade effects with title display

Related Articles

Previous Articles