Adding a “zoom on hover” effect to Squarespace list carousels
List sections are one of the best updates that Squarespace has made in years but targeting them with code can be a little fiddly.
A few weeks ago I noticed a fellow developer having a problem with list sections and how to create a zoom effect when a user hovers over a carousel image in the list.
I went away and like a dog with a bone, was determined to work out a solution. Luckily I did and I came up with some code that could apply a zoom on hover effect to a carousel list item.
First things first you need to add your list section. You can find these sections in anything that would include a list such as people (anything with an i icon is a list section).
Once you’ve added your list you need to make it into a carousel by navigating to edit content > design and selecting carousel.
Watch the video
Check out the YouTube video below 👇
Now that you’ve created your carousel list section, head over to the custom CSS section of your Squarespace dashboard to add in the code.
The code to add in to create a zoom on hover effect is:
.user-items-list-item-container {
.user-items-list-carousel__slide {
pointer-events: initial !important;
}
li img {
transition: 0.2s;
}
li:hover img {
transform: scale (1.1) !important;
transition: 0.2s;
}
}
So if we break that code down, the img refers to the image. Without that, you’ll be zooming in on the whole list item rather than just the image.
📩 Join the inner circle to get exclusive code updates
You can play around with the scale, reducing the number if you want the zoom to be less pronounced and edit the transition to whatever time you want for the image to take to zoom in.
As a rule, I usually make my transitions between 0.2 and 0.3 for the best impact and user experience.
And that’s that. By adding in this code, I’ve found a way to add a zoom on hover effect to carousel images in list sections on Squarespace.
Try it for yourself and 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.