Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Custom CSS for Parallax Effect on Slideshow, Squarespace 7.1


sastavangogh

Question

  • Answers 3
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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 s

3 answers to this question

Recommended Posts

  • 0
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 post
  • 0

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 post

Create an account or sign in to comment

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


×
×
  • Create New...