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.
Add the Ken Burns Effect to an image block
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.
#block-yui_3_17_2_1_1674659605415_12551
.sqs-image-content {overflow:hidden!important;}
#block-yui_3_17_2_1_1674659605415_12551
.sqs-image-content:hover img{
-webkit-animation: kenburns 30s linear infinite paused;
animation: kenburns 30s linear infinite paused;
-webkit-animation-play-state: running;
animation-play-state: running;
}
@-webkit-keyframes kenburns {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(1.25);
transform: scale(1.25);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes kenburns {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(1.25);
transform: scale(1.25);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}Add the Ken Burns Effect to a Grid Gallery Section or Gallery Grid Block
.gallery-grid-item
.gallery-grid-item img:hover {
-webkit-animation: kenburns 30s linear infinite paused;
animation: kenburns 30s linear infinite paused;
-webkit-animation-play-state: running;
animation-play-state: running;
}
@-webkit-keyframes kenburns {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(1.25);
transform: scale(1.25);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes kenburns {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(1.25);
transform: scale(1.25);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}Add the Ken Burns Effect to a Gallery Strips Section
.gallery-grid-item
.gallery-strips-item
.gallery-strips-item img:hover {
-webkit-animation: kenburns 30s linear infinite paused;
animation: kenburns 30s linear infinite paused;
-webkit-animation-play-state: running;
animation-play-state: running;
}
@-webkit-keyframes kenburns {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(1.25);
transform: scale(1.25);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes kenburns {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(1.25);
transform: scale(1.25);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}Add the Ken Burns Effect to a Masonry Gallery Section
.gallery-grid-item
.gallery-masonry-item
.gallery-masonry-item img:hover {
-webkit-animation: kenburns 30s linear infinite paused;
animation: kenburns 30s linear infinite paused;
-webkit-animation-play-state: running;
animation-play-state: running;
}
@-webkit-keyframes kenburns {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(1.25);
transform: scale(1.25);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes kenburns {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(1.25);
transform: scale(1.25);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}Add the Ken Burns Effect to a Fullscreen Gallery Slideshow Section
.gallery-fullscreen-slideshow-item
.gallery-fullscreen-slideshow-item img {
-webkit-animation: kenburns 30s linear infinite paused;
animation: kenburns 30s linear infinite paused;
-webkit-animation-play-state: running;
animation-play-state: running;
}
@-webkit-keyframes kenburns {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(1.25);
transform: scale(1.25);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes kenburns {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(1.25);
transform: scale(1.25);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}Add the Ken Burns Effect to a Section Background
In order to apply the effect to a specific section background:
Replace "#SECTION-ID" with the unique identification code for your own section.
section[data-section-id="63ff6f6b35751a6bb8b41196"]:hover .section-background img {
-webkit-animation: kenburns 30s linear infinite;
animation: kenburns 30s linear infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
@-webkit-keyframes kenburns {
0%, 100% {
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(1.25);
transform: scale(1.25);
}
}
@keyframes kenburns {
0%, 100% {
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(1.25);
transform: scale(1.25);
}
}
