Raise Image Blocks on Hover in Squarespace

Hover effects are one of those small but powerful design touches that bring your Squarespace website to life. They make your site feel interactive, modern, and just a little bit magical.

One of my favorite hover tricks? Raising image blocks slightly when users hover over them. It’s subtle, elegant, and adds a sense of depth that makes your design feel intentional and professional.

Why Use Hover Effects on Images?

Adding hover effects isn’t just about looking cool (although, let’s be honest, that’s part of it). It’s about improving the user experience by providing feedback and interactivity.

Here’s why this effect works so well:

• Creates depth: The lifted look makes images feel dynamic instead of flat.

• Encourages engagement: Visitors are more likely to click or explore when elements respond to them.

• Adds polish: It gives your design that refined, professional feel — like something crafted with care.

• Works anywhere: Use it on portfolios, product grids, blog images, or call-to-action visuals.

---

Step 1: Add Custom CSS

1. Go to Design → Custom CSS in your Squarespace dashboard.

2. Paste the following code:

.sqs-block-image,
.sqs-block-image:hover{
  transition: .2s ease;
}
.sqs-block-image:hover{
  margin-top: -30px;
}

Step 2: Review Your Site

After pasting the code, preview your squarespace site to make sure the effect works as expected. Move your cursor over the images and watch them “lift” off the page.

Step 3: Customize the Animation

You can tweak the CSS to fit your website’s style:

• Animation Speed: Change 0.2s to .5s or any duration you like.

• Lift Height: Adjust -30px to lift images more or less.

• Add Shadow: For extra depth

Important Note: Single Image Hover

If you want this hover effect for only one image, you’ll need its unique block ID:

1. Use the Squarespace ID Finder Chrome Extension.

2. Hover over your image to find its ID (e.g., #block-yui_3_17_2_1_1234567890_12345).

3. Replace .sqs-block-image in your CSS with that ID:

.sqs-block-image,
.sqs-block-image:hover{
  transition: .2s ease;
}
#block-yui_3_17_2_1_1760756070708_6927:hover{
  margin-top: -30px;
}

Wrapping Up

Adding a lift effect to your images is a simple way to make your Squarespace site feel interactive and modern. With a few lines of CSS and a quick customization, you can apply this effect to all images or just a single one — no coding experience required.This small touch creates a polished, professional look that engages visitors without overwhelming your design.

Want help refining your Squarespace site or adding custom CSS features like this?
Get in touch with me here — I’d be happy to help you create a clean, modern, and on-brand Squarespace experience.

---

Your Designer

I'm Ankush, a Squarespace web designer and founder of webgoyat. I have worked with all types of businesses and organizations from preschools to publishing companies to chiropractic clinics and everything in between. If you want to discuss a potential project, you can email me at info@webgoyat.com or get in touch with me here. Alternatively, you can book in a free 15-minute consultation call here.