Gallery Hover Styles

Explore predefined hover styles and preview options to find the perfect fit for your needs. Follow the simple steps to integrate them into your page. This solution is compatible with Squarespace 7.1 Gallery Sections, including Simple, Strips, and Masonry layouts.

How to Use Gallery Hover Styles

Select Hover effect

  1. Choose an Effect
    Select a hover effect from the "Effect Categories" panel. Adjust the "Effect Type" for more customization.

  2. Preview the Style
    Use the "Preview" section to see how the hover effect looks with your selected settings.

  3. Customize Colors
    Modify the "Color Options" to match your site's design.

  4. Copy the Code
    Once satisfied, click Copy Code to generate the required Code Injection snippet.

  5. Add to Squarespace
    Paste the copied Code Injection into Footer Code Injection of your Squarespace website.

Steps in Squarespace

  1. Create a Gallery Section
    Add a Gallery Section to your page. The hover styles work with the Simple, Strips, or Masonry layouts.

  2. Edit Gallery Style and Captions

    • Enable captions by selecting Edit Section and ensuring the Caption option is ON.

    • Add captions to individual images as needed.

    • Some hover effects work best when captions are enabled, so adjust your settings accordingly.

Customizing Effect Application

By default, the Code Injection affects all galleries on the page if placed in the Footer Code Injection. To limit the effect:

  • Use Header Code Injection: Add the code to the Header Code Injection for specific pages.

  • Use a Code Block: Insert the code into a Code Block within the section or page you want the effect to apply.