Section Background Image Zoom on Hover
Want your section background image to zoom when you hover over it? Like this?
View live demo here.
Instructions
1. Copy and paste the following code to Custom CSS.
SECTION_ID_HERE .section-background img {
transition: all ease-in-out 1s !important;
transform: scale(1) !important;
}
SECTION_ID_HERE:hover .section-background img {
transition: all ease-in-out 1s !important; //speed of zoom//
transform: scale(1.2) !important; //amount of zoom//
}
2. Use the Squarespace ID Finder to find your section ID, and add it where it says SECTION_ID_HERE in the code. It will look something like this: section[data-section-id="66f200ee8f72710383ea3cad"]
3. Voila! You’re done!
Customizations
Adjust the speed of the zoom by changing the number on the “transition” line.
Adjust the amount of zoom by changing the number on the “transform” line.
License
This plugin comes with an Unlimited Use License. View License Terms
Was this post helpful? Consider buying me a coffee to say thanks!