Note: While our most popular guides have been translated into Spanish, some guides are only available in English.
Creating hover effects for your images

Hover effects display information or create movement when you move your cursor over an image. This adds a subtle level of interaction and animation to your site and can be a great way to reveal titles and captions without obscuring an image or taking up extra space on a page.

You can use hover effects on any template with Image Blocks and Slideshow Gallery Blocks. Certain templates support hover effects for Gallery Pages, Index Pages, and Products Pages. This guide explains each area in detail.

Hover effects in Image Blocks

You can show an image caption on hover in Inline Image Blocks.

  1. Add a new Image Block or open an existing one.
  2. In the Design tab, ensure Inline is selected.
  3. Select Caption Overlay on Hover from the drop-down menu.
  4. Click Apply to close the window.
  5. Hover over the Image Block. In the black caption overlay that appears, click Write here... and enter your caption.
  6. After saving the page, the caption will appear on hover. Use Site Styles tweaks to style the image caption.

choose inline and caption overlay on hover

example caption on hover

Hover effects in Gallery Blocks

You can show image titles and descriptions on hover in a Slideshow Gallery Block.

  • Hover effects are only available in the Slideshow Gallery Block design.
  • Titles and descriptions won't display on mobile devices narrower than 480 pixels.
  • Captions set to appear on hover may appear on larger devices, such as tablets, or for smaller devices in landscape mode. The captions will either always display, or appear on tap. This depends on the mobile device.
  • To learn more about Gallery Blocks, visit Using Gallery Blocks.

Step 1 - Add a title and description

  1. Add a new Slideshow Gallery Block or open an existing one.
  2. In the Edit Gallery window, hover over an image and click the .
  3. Enter a title and description.
  4. Click Apply.

enter image title and description

Step 2 - Select the hover effect

  1. Click the Design tab.
  2. Check Show Title and Description and Show on Hover.
  3. Select a position from the Title and Description Position drop-down menu.
  4. Click Apply.

show title description on hover

gallery hover example

Hover effects in Gallery Pages

Some templates support hover effects for Gallery Pages. You can enable and adjust these effects using Site Styles.

Image titles and descriptions display on hover for Slideshow and Grid designs in these template families:

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

Enable and customize the hover effect

While on the Gallery Page, open Site Styles and scroll down to Gallery Styles. Click Gallery Design: and select Slideshow or Grid. 

  • Slideshow - Select Show on Hover from the Gallery Info Overlay drop-down menu. Titles and description will display on hover.
  • Grid - Titles and descriptions will appear on hover in lightbox, unless a clickthrough URL is set for the image. For more on lightbox, visit Setting images to open in lightbox.

choose a gallery style

Other Gallery Page effects by template

Gallery Pages have special hover effects in these template families:

  • Forte - Hovering over the Gallery Page's carousel displays navigation arrows. Hovering over a caption slides the caption up so you can read longer descriptions.
  • Momentum - Arrow navigation on hover when fullscreen.
  • Tremont - Display captions on hover.
  • Wexley - Hovering over images in a Gallery Page displays the image title and a color overlay.

Hover effects in Index Pages

Index Pages have special hover effects in these template families:

  • Avenue - Hovering over a thumbnail changes its opacity. You can also display the page's Navigation Title on hover.
  • Flatiron - Hovering over a thumbnail zooms and pans in on the image.
  • Montauk - Hovering over a thumbnail changes its opacity.
  • Tremont - Hovering over a page title in the Index navigation causes the page's thumbnail to appear as a background image.
  • York - Thumbnail images can fade on hover, and thumbnail titles can display on hover.

Visit their template guides for more help.

Hover effects on Products Pages

How hover effects display depends on your template family's Products Page type:

Was this article helpful?
31 out of 168 found this helpful
Creating hover effects for your images