Creating hover effects for your images

Enhance images and hold a visitor’s attention by applying mouse over effects.

Last updated December 21, 2024

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 site with image blocks and Slideshow gallery blocks. Depending on your site's version and template, your site may also support hover effects in other areas of your site. This guide explains each area in detail.

Tip

Most mobile devices don't support hover effects, so your visitors' experience may vary depending on what device they use to visit your site.

Image blocks

Accessing this feature

Image blocks added to Fluid Engine sections don't support hover effects or built-in captions. Create captions by using a text block to add text adjacent to or overlaying an image block.

You can show an image caption on hover in Inline image blocks.

  1. Add a new image block or open an existing one.
  2. Click the Design tab, then select Inline.
  3. Click the Content tab, then select Caption Overlay on Hover from the Caption drop-down menu.
  4. Hover over the image block. In the black caption overlay that appears, click Write a caption here... and enter your caption.
  5. After saving the page, the caption appears on hover. Use style tweaks to style the image caption.

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 or long press, depending on the mobile device.

To add text and enable hover effects:

  1. Add a new Slideshow gallery block or open an existing one.
  2. In the Content tab, hover over an image and click the the-gear-icon.
  3. Enter a title and description. You can also add an optional clickthrough URL
  4. Click Save.
  5. Click the Design tab.
  6. Check Show Title and Description.
  7. Select a position from the Title and Description Position drop-down menu.
  8. Click Show on Hover.
  9. Click Apply.

Portfolio pages

Some portfolio page layouts support hover effects. From the portfolio page editor, choose one of the following layouts:

  • Hover: Background - Displays the project titles in a stacked or inline layout. When hovering over a title, the project featured image replaces the section background.
  • Hover: Fixed - Displays the project titles in a stacked or inline layout. When hovering over a title, the project featured image displays smaller in a fixed position in the section.
  • Hover: Follow Cursor - Displays the project titles in a stacked or inline layout. When hovering over a title, the project featured image displays smaller and follows the cursor as it moves. 

To learn more, visit Portfolio pages

Store pages

Hover effects work differently depending on your site's version

When a product has more than one image, the store page displays an alternate product image on hover. Learn more in Styling store pages

How hover effects display depends on your template family's store page type:

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 descriptions will display on hover. Captions set to appear on hover may appear on larger mobile devices, such as tablets, or on smaller devices in landscape mode. Captions captions will either always display or appear on tap or long press, depending on the mobile device.
  • Grid - Titles and descriptions will appear on hover when the image is opened in a lightbox, unless the image has a clickthrough URL. To learn more, visit Setting images to open in a lightbox.

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.

Index pages (version 7.0)

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 featured image 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.

Footer Image
  • Get help from our community

  • Get help from our community on advanced customizations.

  • Hire a Squarespace Expert

  • Stand out online with the help of an experienced designer or developer.