How to Create the Ken Burns Effect in Divi 5

The Ken Burns effect is a slow zoom and pan applied to a still image. It's named after documentary filmmaker Ken Burns, who popularized the technique. The effect adds cinematic motion to a static background and works well in hero sections.

This guide walks you through building the effect in Divi 5 using the Hero module, the Custom Attributes option group, and a small block of custom CSS.

Before You Begin

Have a high-resolution image ready. The effect zooms up to 1.5x, so use an image large enough to avoid pixelation.

Add a Section and Hero Module

Open the page in the Visual Builder where you want the effect.

Add a regular Section.
Inside the Section, add a Row with a single column.
Add the Hero module to the column.
Set the Title, subtitle, and body text as needed.

Optional steps

Edit the Section and go to the Design tab → Spacing.
Set the Top and Bottom padding to 0.
Edit the Row and go to the Desing tab → Sizing.
Set the Width and Max Width to 100%.
Open the Hero module's settings and go to the Design Tab → Layout.
Enable the Make Fullscreen option.

Set the Background Image and Enable Parallax

Divi 5 - Hero module enable Parallax effect

Open the Hero module settings.

Go to Content → Background → Background Image.
Click +Add Background Image and choose your image.
Find the Background Image Parallax toggle and set it to On.
Set the Parallax Method to CSS.

Add a CSS Class as a Custom Attribute

In Divi 5, CSS classes are added through the Attributes option group. Full details are in Custom Attributes in Divi 5.

In the Hero module settings, go to the Advanced tab.
Expand the Attributes option group.
Click + Add Attribute.
Set the Target to Module.
Set the attribute Name to class.
Set the Value to one of the following, depending on the motion you want:
- kb-zoomin - zooms in on the image
- kb-zoomout - zooms out from the image
- kb-zoomin-right - zooms in and pans right
- kb-zoomout-right - zooms out and pans right

Add the Custom CSS

Paste the CSS below into Divi's site-wide custom CSS area. For every place custom CSS can live in Divi 5, see Where to Add Custom CSS Code in Divi 5.

For this particular example, we recommend adding the CSS code to the Divi → Theme Options → Custom CSS.

.kb-zoomin .et-pb-parallax-wrapper {
  animation: zoomin 17s forwards;
}

.kb-zoomout .et-pb-parallax-wrapper {
  animation: zoomout 17s forwards;
}

.kb-zoomin-right .et-pb-parallax-wrapper {
  animation: zoomin-right 17s forwards;
}

.kb-zoomout-right .et-pb-parallax-wrapper {
  animation: zoomout-right 17s forwards;
}

@keyframes zoomin {
  0% {
    transform: scale3d(1.1, 1.1, 1.1);
    animation-timing-function: linear;
  }

  100% {
    transform: scale3d(1.5, 1.5, 1.5);
  }
}

@keyframes zoomout {
  0% {
    transform: scale3d(1.5, 1.5, 1.5);
    animation-timing-function: linear;
  }

  100% {
    transform: scale3d(1.1, 1.1, 1.1);
  }
}

@keyframes zoomin-right {
  0% {
    transform: scale3d(1.1, 1.1, 1.1) translate3d(0, 0, 0);
    animation-timing-function: linear;
  }

  100% {
    transform: scale3d(1.5, 1.5, 1.5) translate3d(-150px, -20px, 0);
  }
}

@keyframes zoomout-right {
  0% {
    transform: scale3d(1.5, 1.5, 1.5) translate3d(-150px, -20px, 0);
    animation-timing-function: linear;
  }

  100% {
    transform: scale3d(1.1, 1.1, 1.1) translate3d(0, 0, 0);
  }
}

Note: Adjust the 17s duration to speed up or slow down the motion.

Save the Changes

Click Save in the top bar of the Visual Builder, and view the page.

The background image inside the Hero module will zoom or pan based on the class applied.

How to Create and Use the "Ken Burns Effect" in Divi

Using Divi Scroll Effects

The Image Module in Divi 5

The Slider Module in Divi 5

The Hero Module in Divi 5