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

Step 2. Add this code to Footer Code Injection

Step 3. Add this code to Custom CSS

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.

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.