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 👇
Want a framework for designing the perfect homepage?
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.
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!
Need an expert to build your Squarespace website?
Book a free kick-off call with our team to discuss your project requirements in detail.
