Add Ken Burns Effect to Squarespace Images and Banners
The Ken Burns effect is a powerful tool for adding visual interest and sophistication to your Squarespace images. Named after the documentary filmmaker, this technique uses subtle pan and zoom movements to animate static images and bring them to life. In this article I will guide you through the process of implementing the Ken Burns effect on your Squarespace images, galleries, and section banners using CSS. The codes by default are triggered by hovering on an image but I’ll also be showing you how to have the effect active at all times. Let’s get started!
Pretty cool, eh?
Note: The codes provided below will only activate when a user hovers over the image. If you want the effect to be constantly visible, regardless of whether the user is hovering or not, you will need to remove the ":hover" portion of the code.
To apply the effect to a specific image, you will need to replace "#BLOCK-ID" in the code with the unique "#BLOCK-ID" of that image. If you want the effect to apply to all images on a specific page, you should use the "#COLLECTION-ID" of that page instead of the "#BLOCK-ID". This way the effect will be applied to all images in that specific page. To target all image blocks on your website, remove "#BLOCK-ID" from the code. This way the effect will be applied to all images on your website.
In order to apply the effect to a specific section background:
Replace "#SECTION-ID" with the unique identification code for your own section.