FREE Squarespace Plugins for Rollover Effects on Images

Why This Matters

You’ve chosen Squarespace for a simple reason: it promises good-looking websites without the headaches. So it’s deflating when you realise everyone else’s site on the block looks almost exactly like yours. The real kicker is that anything visually engaging, such as proper rollover image effects, typically costs extra, needs a page builder add-on, or involves tinkering with code that looks suspiciously like gibberish.

Many website owners face this frustration: standing out shouldn’t be a luxury. If you run a portfolio, a shop, or any site in a saturated niche, all those “little” touches matter. Hover effects transform static photo galleries and bland grid layouts into dynamic, interactive features. They entice visitors to stick around and explore more (which, by the by, search engines rather like). For designers, they’re non-negotiable: they signal attention to detail and can be the difference between being remembered and being “just another site”.

Most Squarespace users end up scouring forums in the wee hours, searching for ‘free plugins’ and ‘easy image rollovers’ with very few usable results. At Pixelhaze, we’ve spent years building out custom plugins to add life to Squarespace, and today we’re giving you some of our favourite (free!) transition effects. No secret paywall, just practical solutions. If that’s music to your ears, read on. Your future visitors will thank you.

Common Pitfalls

Most people trip up here, despite their best efforts:

1. Going Code-Blind:
Copy-pasting CSS from blogs or forums sounds quick, but then nothing happens on your images except, perhaps, a throbbing sense of disappointment.

2. Missing Key Setup Steps:
Rollover code works by targeting specific image block elements like the title and description. If your image blocks don’t display these, your zingy hover effect will do absolutely nothing (except clutter your CSS for the next poor soul).

3. Block ID Nightmares:
On Squarespace’s basic plans, targeting individual image blocks means using Block IDs. Many users either can’t find these, or use them incorrectly, ending up with effects on the wrong images or none at all.

4. Forgetting Responsiveness:
You get it working on desktop, but on mobile, the effect is unreadable, buggy, or just gone. This is a big oversight, especially if your traffic’s mostly on phones or tablets.

These are the headaches that lead to “I tried, but gave up” stories. To help you sidestep them, let’s walk through the full process, with nothing skipped.

Step-by-Step Fix

Step 1: Prepare Your Image Blocks Properly

The CSS tricks rely on two things: your image displaying both a title and a description, and your chosen image block design being compatible with overlays. Here’s how you do it the right way:

1. Go to your Squarespace page and add a new Image Block where you want your effect.
2. In the image upload dialogue, add an image as usual.
3. Enter a Title—the text you’d like to appear on hover.
4. Add a Description—can be a quick line, or creative call-to-action.
5. Still in the image dialogue, click the Design tab.
6. Set the layout to Poster (not Inline, Card, or Stack).
7. Click Apply.

Repeat for every image you want to have a rollover effect.

Step 2: Find and Use Block IDs Sensibly

On Squarespace’s basic plans, one bit of code can accidentally target every image block on your page (imagine your carefully chosen rollover effect blinking across your logo or background images—this is unpleasant). To apply effects only where you want them:

1. Open your site in Google Chrome.
2. Install the “Squarespace Collection/Block Identifier” plugin (free, fast, and created for this).
3. With it active, load your page and each block will reveal its unique ID when you hover over it.
4. Make a list of the Block IDs for the image blocks you’ll target (they’ll look something like #block-yui_3_17_2_1_1234567890_123).

You’ll use these IDs in your CSS, like this:

#block-yui_3_17_2_1_1234567890_123 {
  /* your effect here */
}

Step 3: Copy, Paste, and Adapt Free Plugin CSS

Now for the good stuff. Below you’ll find three of our favourite homegrown, free rollover plugins. Each one can inject new life into Squarespace image galleries, features, portfolios, or shops. Once you’ve prepped your image blocks as above, you can copy the CSS below into Design > Custom CSS.

Jaws Plugin: Bold Cut-to-Action

Think of a classic film poster reveal: the image darkens on hover, and bold text (your title) slashes across the centre. This creates a striking effect, ideal for portfolios or featured products.

/* Replace YOUR_BLOCK_ID with your unique ID for each image block */
#YOUR_BLOCK_ID .image-title-wrapper {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.4s cubic-bezier(.44,.66,.36,1.04);
}
#YOUR_BLOCK_ID:hover .image-title-wrapper {
  opacity: 1;
  transform: translateY(0);
}
#YOUR_BLOCK_ID .image-block .sqs-block-image {
  overflow: hidden;
}
#YOUR_BLOCK_ID img {
  filter: brightness(80%);
  transition: all 0.4s cubic-bezier(.44,.66,.36,1.04);
}
#YOUR_BLOCK_ID:hover img {
  filter: brightness(40%) blur(2px);
}

Peekaboo Plugin: Gentle Slide-In

An inviting, softer approach. When users hover, the image title floats up, accompanied by a gentle lifting of the description. This is effective for galleries that want a human touch.

#YOUR_BLOCK_ID .image-title-wrapper, 
#YOUR_BLOCK_ID .image-description-wrapper {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.5s ease;
}
#YOUR_BLOCK_ID:hover .image-title-wrapper,
#YOUR_BLOCK_ID:hover .image-description-wrapper {
  opacity: 1;
  transform: translateY(0);
}
#YOUR_BLOCK_ID img {
  filter: none;
  transition: filter 0.5s;
}
#YOUR_BLOCK_ID:hover img {
  filter: brightness(65%);
}

Through the Mist Plugin: Upmarket Fade

Your image retains its colour, but on hover, a subtle blur and a gentle white overlay appear. The title and description fade forward, almost as if materialising out of thin air. This creates a subtle, sophisticated effect.

#YOUR_BLOCK_ID .image-title-wrapper, 
#YOUR_BLOCK_ID .image-description-wrapper {
  opacity: 0;
  transition: opacity 0.5s;
}
#YOUR_BLOCK_ID:hover .image-title-wrapper,
#YOUR_BLOCK_ID:hover .image-description-wrapper {
  opacity: 1;
}
#YOUR_BLOCK_ID img {
  filter: none;
  transition: filter 0.5s;
}
#YOUR_BLOCK_ID:hover img {
  filter: blur(2px) brightness(90%);
}
#YOUR_BLOCK_ID::before {
  content: '';
  display: block;
  position: absolute;
  top:0;left:0;width:100%;height:100%;
  background: rgba(255,255,255,0.23);
  pointer-events:none;
  opacity: 0;
  transition: opacity 0.5s;
}
#YOUR_BLOCK_ID:hover::before {
  opacity: 1;
}

A Note on CSS Placement:
Paste your modified code into Design > Custom CSS in your Squarespace dashboard. Replace YOUR_BLOCK_ID with the Block ID for each image block you want to target. Do not skip this step or your code will quietly fail.

Step 4: Save, Check, and Optimise Responsiveness

Once your CSS is in place, always check the results:

1. Save your changes in Squarespace.
2. Open your site in a private/incognito window (this ensures cached styling doesn’t give you a false positive).
3. Test on both desktop and mobile, if possible.

On mobile, rollover effects become “tap-to-reveal”, but not all designs suit touchscreens. Make minor adjustments if necessary, or use a media query like this to turn off hover effects on smaller screens:

@media (max-width: 767px) {
  #YOUR_BLOCK_ID .image-title-wrapper,
  #YOUR_BLOCK_ID .image-description-wrapper {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }
  #YOUR_BLOCK_ID img {
    filter: none !important;
  }
  #YOUR_BLOCK_ID::before {
    opacity: 0 !important;
  }
}

Step 5: Make Signup Easy (Bonus for Pixelhaze Fans)

If you liked what you’ve borrowed here, we offer a no-strings plugin giveaway every month. We want more folks to experiment with thoughtful design, rather than be limited by Squarespace’s restrictions.

Pop your email into our list, and every month you’ll get a new free plugin, access to web design tips, and the occasional virtual coffee invite:

Sign up here for free monthly plugins.

Your privacy is sacred—no spam, ever.

What Most People Miss

A key detail separates pixel-pushers from proper site builders: treating a “plugin” as a shortcut, not a foundation. Real web presence happens when you use effects to reinforce a message rather than distract. You win when the user hovering over an image experiences a bit of delight or feels prompted to act.

Overuse happens easily: if every section is overloaded with effects, nothing stands out. Pick your moments. Place your rollovers on feature products, signature projects, or key conversion points. Be intentional. Your visitors will notice the care, even if they can’t put their finger on why the site feels cohesive and inviting.

The Bigger Picture

Interactive image rollovers encourage users to explore. This approach shows you’re focused on the user experience rather than just aesthetics. Over time, effort invested in small touches like this pays off: visitors spend longer, pages avoid feeling templated, and word-of-mouth spreads faster. Google’s algorithms notice when people engage with your content, not just pass through.

For businesses, attention to detail communicates high standards. It helps you stand out from the crowd who simply publish and move on.

There’s much to explore once you master these effects. Try advanced ecommerce plugins, thermal overlays, or even playful micro-interactions that reflect your brand’s voice.

Wrap-Up

To recap, Squarespace can do much more than present nice layouts when you have the right tools and a bit of technical know-how. By setting up your image blocks sensibly, grabbing Block IDs, and pasting proven Pixelhaze plugin CSS, you turn static pages into vibrant, memorable experiences. Check your site on all devices, use tweaks with intention, and you’ll build websites that look unique and engage visitors.

Questions, stuck points, or want to show off your results? Drop a comment below or get in touch. We read every message.

Want more helpful systems like this? Join Pixelhaze Academy for free at https://www.pixelhaze.academy/membership.

See you in your inbox,
Will

Related Reading:

• Adding Personality to your Website with Animated Gifs
• Custom CSS for Squarespace: The Complete Getting-Started Guide
• [Why Your Squarespace Gallery Needs a Rollover Effect—And How to Add One]

About the Author

Will Hammond is Technical Director at Pixelhaze Academy. His idea of fun is making Squarespace do things it was never intended to, then sharing those methods freely. If he’s not coding up the next plugin, you’ll find him answering questions in the comments or beta-testing whatever Ken’s cooked up in the design lab.