How to add an animated tilt effect on your Squarespace images on hover
Animation! It's everywhere at the moment and adding it to your site is a super easy way to keep your users engaged with your content. Best part is it's not complicated at all, with just a couple of lines of code you'll be able to make your images tilt when someone hovers over them. The fact it's such a cute animation is a bonus!
Where to paste your code into Squarespace:
You'll find your CSS dashboard in the pages section on your site, scroll down to the bottom and you'll see Website tools. Click on that and you'll see custom CSS, open that and pasted following codes to make the changes. EASY!
Adding a tilt effect to all of your images in Squarespace
Adding this tilt affect to your Squarespace images is such a lovely way to add some movement to your site.
It's a surefire way to get your user to stop there scroll and pay attention to your content. Simply copy and paste the code into your CSS panel and there you go tilt effects for all of your images.
To customise: you can customise the rotate angle by changing the number of degrees and you can also change the seconds which will change how long it takes for the image to rotate
// IMAGE BLOCK - TILT HOVER //
.sqs-block-image:hover {
transform: rotate(5deg) !important;
transition: all 0.2s ease-in-out !important;
}
.sqs-block-image {
transition: all 0.2s ease-in-out !important;
}
Hey I’m Nisha, a 10 year Squarespace Certified Expert. I build highly engaging and swoon worthy websites for Creatives, Coaches and Female Business Owners.
Click explore if you want to know more about how I can help you launch your dream website in just 1 week!
