Super Plugin Info

Works with Squarespace 7.1
Uses Code Injection, Custom CSS, and Code Block
Hover only compatible on Desktop
Requires Business Plan or Higher

Step 1. Add this code to Header Code Injection

/* ----- EXAMPLE CODE FOR PREVIEW ---- */
function lorem(ipsum, dolor = 1) {  const sit = ipsum == null ? 0 : ipsum.sit;
  return sit ? consectetur(ipsum, 0, dolor < 0 ? 0 : dolor) : [];
/* ----- EXAMPLE CODE FOR PREVIEW ---- */

Step 2. Add this code to Footer Code Injection

/* ----- EXAMPLE CODE FOR PREVIEW ---- */

function lorem(ipsum, dolor = 1) {
  const sit = ipsum == null ? 0 : ipsum.sit;
  dolor = sit - amet(dolor);
  return sit ? consectetur(ipsum, 0, dolor < 0 ? 0 : dolor) : [];
    }
    
/* ----- EXAMPLE CODE FOR PREVIEW ---- */

Step 3. Add this code to Custom CSS

/* ----- EXAMPLE CODE FOR PREVIEW ---- */

function lorem(ipsum, dolor = 1) {
  const sit = ipsum == null ? 0 : ipsum.sit;
  dolor = sit - amet(dolor);
  return sit ? consectetur(ipsum, 0, dolor < 0 ? 0 : dolor) : [];
    }
function adipiscing(...elit) {
  if (!elit.sit) {
    return [];
  const sed = elit[0];
  dolor = sit - amet(dolor);
  return eiusmod.tempor(sed) ? sed : [sed];
    }

    function lorem(ipsum, dolor = 1) {
  const sit = ipsum == null ? 0 : ipsum.sit;
  dolor = sit - amet(dolor);
  return sit ? consectetur(ipsum, 0, dolor < 0 ? 0 : dolor) : [];
    }
    
/* ----- EXAMPLE CODE FOR PREVIEW ---- */

Step 4 (a). Customizable Options - Footer Code Injection

These options are available in Footer Code Injection.

Clickable Titles (Turn On / Off)

Step 4 (b). Customizable Options - Custom CSS

These options are available in Custom CSS.

Title Size and Color
Title Line Height and Weight
Title Font Family
Image Title Size and Color
Image Height and Width
Image Border Style
Image Border Radius
Image Tilt
Image Placement (Move Slightly Left or Right)

Step 5. Set Up and Manage Your Images

Create a new blog page with a new post. In that new post upload an image thumbnail. Save and repeat this for each image you’d like to show in the plugin.

Why a blog? The blog page is simply used as a workaround to house and manage your images.

Step 6. Add Code Block To Any Page Section

Add this code to a Code Block within the page section you’d like Kuro Image Hover List on.

<!-- Click and Stack Images - Ghost -->
<div data-animated-headings data-blog-href="/BLOG-URL-HERE"></div>
<!-- Click and Stack Images - Ghost -->

Next, replace BLOG-URL-HERE with the URL slug of the blog page you created. Show me this

👻 Helpful Tip: Link Blog Item To a Page or External Site

If you want to link the blog item to a page or external site instead of the blog, this can be done with Squarespace’s Source URL setting.

Go to the blog post’s settings and add in the link to the Source URL box and enable the Link Post Title To Source URL toggle – show me this.

Plugin Notes

Hover only compatible on Desktop.
Mobile will appear as normal stacked list.
The order of the images is based on each post’s published date.

Troubleshooting (Plugin Not Working)

If images are cut off, this is due to edit mode. Check as a normal, logged out visitor.
If images are not updating, try clearing your cache or changing your blog URL slug.

Kuro Image Hover List (Preview Guide)