Custom CSS for Parallax Effect on Slideshow, Squarespace 7.1

Site URL: https://www.aditya-sinha.com/

Hi anyone, or @tuanphan,😄

I want to add custom css for parallax effect (or Tilt Animation) to the slide show on my home page (Paloma template, version 7.1). Please suggest how to do so without Javascript code injection; I can only include custom css. 

Password for website access: tester 

Please let me know how to do this!

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.

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!

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!