Add hover effects to images in Squarespace [Easy CSS tutorial]

I love adding hover effects on Squarespace. In fact, I love them so much I’ve already made tutorials on adding “zoom on” hovers and changing the colour of links with a hover effect. 

Today I’ll be looking at adding a hover effect to images, specifically making images move up when you hover over them, and back down when you move your cursor away. 

This is an effect that I’ve used on countless client sites to great success so without further ado, let’s jump straight into the tutorial.

Watch the video

Check out the YouTube video below 👇

How to create an image hover effect on Squarespace 

In order to add the hover effect to images on Squarespace you’re going to need to use some custom code. 

Navigate to Design > Custom CSS and add in the following code to your CSS panel:

.sqs-block-image {

transition: 0.3s !important;

&:hover {

transition: 0.3s !important;

margin-top: -10px;

}

}

This code tells Squarespace firstly that you’re targeting the block image and that you want to add a transition to the image.

---

📩 Join the inner circle to get exclusive code updates

---

You can play around with the timings and movement of your images within the code but I find the above proportions work best. 

You can also use your Squarespace ID Finder plugin to identify the block of images you want to target and paste this into your CSS panel in order to target specific images with the code.

Hit save and the hover effect will be applied. 

Have a play around and see which images it works for on your Squarespace website and of course, let me know how you get on!

---

Your designer

I'm Sam, an award-winning Squarespace web designer. I have worked with every type of business, building platforms for solo entrepreneurs through to multi-million dollar corporations. If you want to discuss a potential project, you can email on sam@bycrawford.com or get in touch with me here. Alternatively, you can book in a free 15-minute consultation call here.

---

Want more?