Jump to content

Custom CSS for Parallax Effect on Slideshow, Squarespace 7.1

Recommended Posts

  • Replies 3
  • Views 751
  • Created
  • Last Reply
On 4/27/2021 at 4:16 AM, Wolfsilon said:

Hello,

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. 

Thanks!

Link to comment

Hello,

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

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.