Jump to content

Custom CSS for Parallax Effect on Slideshow, Squarespace 7.1

Recommended Posts

On 4/27/2021 at 4:16 AM, Wolfsilon said:


In order to achieve this effect, you will indeed need to have Javascript customization enabled for your site. It may be possible to create hover-based CSS animations for the entire slide show block itself but not for individual slides.

Hi yes, even a hover-based CSS animations for the entire slide show block would be alright. I do not need to add an animation to individual slides. Do share any code you might have that could help with this please. 


Link to comment


A simple hover animation for the slide show blocks would look something like this:

.gallery-fullscreen-slideshow-item img {
transition: all .5s;

.gallery-fullscreen-slideshow-item img:hover {
transform: scale(1.05);

This will apply the hover effect to all slide shows. If you only want to target a slide show on a specific page, you will need to install a browser extension or inspect the page -- identify the section with the slide show and add the ID before the CSS code above.


Hope that this helps!

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.