Images are powerful visual tools that can become even more engaging with hover effects. Here's how to implement them effectively across different Squarespace elements.

Image Block Hover Effects

Add hover captions to inline Image Blocks in 4 steps:

1. Open or add a new Image Block
2. Select "Inline" in the Design tab
3. Choose "Hover over caption" from the Caption menu in Content tab
4. Add your description in the black overlay that appears

Slideshow Gallery Hover Effects

To enable hover effects for titles and descriptions:

1. Access the Slideshow Gallery Block
2. Add titles and descriptions to images
3. Enable "Show title and description" in Design
4. Select position and "Show on hover"
5. Apply changes

Note: Hover captions appear differently on mobile devices under 480px width.

Portfolio Page Hover Options

Three hover layout options available:

• Background: Shows project titles; hover reveals full featured image
• Fixed: Displays titles; hover shows smaller fixed position image
• Follow cursor: Shows titles; hover reveals image that follows cursor

Store Page Hover Features

Version 7.1 and 7.0 support:

• Alternative product images on hover
• Product details display
• Preview button options
• Custom overlay effects

Gallery Page Hover Effects

Available in multiple templates including Adirondack, Brine, and York:

• Slideshow: Shows titles/descriptions on hover
• Grid: Displays information in lightbox view
• Template-specific effects like navigation arrows and caption scrolling

Index Page Special Effects

Template-specific hover features include:

• Opacity changes
• Image enlargement
• Background image display
• Thumbnail fading
• Title reveal

Important: Hover effects may display differently on mobile devices, typically showing on tap or appearing permanently for better usability.

These hover effects enhance user interaction while maintaining clean design, making your site more engaging and professional.

Related Articles

Previous Articles