How to Create Image Hover Effects in Web Design: A Complete Guide
Apply engaging hover effects to make your images interactive and enhance user experience. These effects display additional information or create motion when users hover their cursor over images.
Image Block Hover Effects
To add caption overlays on image blocks:
- Open or add a new image block
- Select [Design] tab and choose [Inline]
- In [Content] tab, select [Overlay caption on hover]
- Click [Enter caption here...] in the black overlay
- Save and adjust caption styling as needed
Slideshow Gallery Hover Effects
To display titles and descriptions on hover:
- Access gallery block settings
- Add title and description in [Content] tab
- Enable [Display title and description] in [Design] tab
- Choose position from dropdown menu
- Select [Display on hover]
- Click [Apply]
Note: Hover captions may not display on mobile devices under 480px.
Portfolio Page Options
Available hover layouts:
- Background: Shows project title with background image on hover
- Fixed: Displays small fixed image when hovering over title
- Follows Cursor: Image moves with cursor movement
Store Page Features
Hover capabilities vary by template:
- Advanced: Shows secondary images, product details, and quick view
- Classic: Displays product info with color overlay
- Galapagos: Features alternate images and information overlay
- Supply: Custom product information display options
Gallery Page Functionality
Supported template families include:
- Adirondack
- Aviator
- Bedford
- Brine
- Farro
- Five
- Galapagos
- Native
- Pacific
- Skye
- York
Configure gallery hover effects:
- Access site styles
- Navigate to [Styles for Gallery]
- Choose [Slideshow] or [Grid] design
- Select hover display options
Note: Some mobile devices may show captions permanently or require tapping to display.
Special template effects include:
- Forte: Sliding captions and navigation arrows
- Momentum: Full-screen navigation on hover
- Tremont: Caption display
- Wexley: Title and color overlay effects
Index Page Special Effects
Template-specific features:
- Avenue: Opacity changes and navigation title display
- Flatiron: Image zoom and pan effects
- Montauk: Opacity transitions
- Tremont: Background image preview
- York: Image fade with title overlay