Zoom effect « Ken Burns » on full screen headers and Divi slides

Effect « Ken Burns » is a well-known, simple and effective effect to give a movement impression to static images. In this article, I explain how to simply add these effects to your full screen header or Divi slideshows with some CSS lines.

1 – What is the effect « Ken Burns » ?

The « Ken Burns Effect » is an animation technique used mainly in video editing and video slideshows. It consists of applying a simulated camera motion to a fixed image, combining a front/rear zoom and a panoramic (lateral or vertical displacement).

This term comes from American documentary artist Ken Burns, which has widely popularized this technique in its historical films, notably to give dynamic to archival photographs.

These effects can be used in:

• Documentaries : to give life to historical photos.
• Slideshows : to make presentations more attractive.
• Video montages Software such as iMovie, Final Cut Pro, Premiere Pro, etc. usually offer these Ken Burns effects.

It is a simple but effective effect to capture the viewer's attention and give an impression of movement to static images.

Did you know that? You can test Divi for free by visiting on this page and by clicking on "TRY IT FOR FREE"

2 - Create Ken Burns effect with some CSS lines

We will create 6 CSS classes which we can then apply to certain Divi modules. Add the following code to the Appearance > Customize > Additional CSS:

.kb-zoomout .et_pb_slide .et_parallax_bg,
.kb-zoomout .et_parallax_bg {
  animation: zoomout 7s forwards;
}

.kb-zoomin .et_pb_slide .et_parallax_bg,
.kb-zoomin .et_parallax_bg {
  animation: zoomin 7s forwards;
}

.kb-zoomin-right .et_pb_slide .et_parallax_bg,
.kb-zoomin-right .et_parallax_bg {
  animation: zoomin-right 7s forwards;
}

.kb-zoomout-right .et_pb_slide .et_parallax_bg,
.kb-zoomout-right .et_parallax_bg {
  animation: zoomout-right 7s forwards;
}

.kb-zoomin-left .et_pb_slide .et_parallax_bg,
.kb-zoomin-left .et_parallax_bg {
  animation: zoomin-left 7s forwards;
}

.kb-zoomout-left .et_pb_slide .et_parallax_bg,
.kb-zoomout-left .et_parallax_bg {
  animation: zoomout-left 7s forwards;
}

@keyframes zoomout {
  0% {
    transform: scale3d(1.5, 1.5, 1.5) translate3d(0px, 0px, 0px);
  }
  100% {
    transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
  }
}

@keyframes zoomin {
  0% {
    transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
  }
  100% {
    transform: scale3d(1.5, 1.5, 1.5) translate3d(0px, 0px, 0px);
  }
}

@keyframes zoomout-right {
  0% {
    transform: scale3d(1.5, 1.5, 1.5) translate3d(-150px, -20px, 0px);
  }
  100% {
    transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
  }
}

@keyframes zoomin-right {
  0% {
    transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
  }
  100% {
    transform: scale3d(1.5, 1.5, 1.5) translate3d(-150px, -20px, 0px);
  }
}

@keyframes zoomout-left {
  0% {
    transform: scale3d(1.5, 1.5, 1.5) translate3d(150px, -20px, 0px);
  }
  100% {
    transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
  }
}

@keyframes zoomin-left {
  0% {
    transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
  }
  100% {
    transform: scale3d(1.5, 1.5, 1.5) translate3d(150px, -20px, 0px);
  }
}

Here are some explanations:

1. .kb-zoomin : Zoom in (enlargement). Animation: The element starts at 1.1x its normal size and gradually grows up to 1.5x.
2. .kb-zoomout : Zoom back (reduction). Animation: the element starts at 1.5x its size and gradually returns to 1.1x.
3. .kb-zoomin-right : Zoom forward with moving to the right. Animation: the element grows while moving to the right (-150px in X).
4. .kb-zoomout-right : Zoom back with right movement. Animation: the element shrinks while moving to the right (-150px in X).
5. .kb-zoomin-left : Zoom forward with left-hand movement. Animation: the element grows while moving to the left (+150px in X).
6. .kb-zoomout-left : Zoom back with left-hand movement. Animation: the element shrinks while moving to the left (+150px in X).

As a reminder: Here's how to add code to Divi.

3 – Add Ken Burns effect to a module « Full screen header »

Once the CSS is added to your site, it will be very easy to add the effect on a full screen header for example. To do this, add a full screen section (violet section) to your page and add a module in this section Header Full Screen.

1. From the Contents tab of the Header Full Screen module, add a background image. Activate the Parallax + CSS method option.
2. Then on the Style > Model tab: pass the image in full screen mode.
3. Finally, on the Advanced tab, add one of the 6 CSS classes created previously.

There you go! Your image seems animated!

4 - Add the effect Ken Burns on a « Full-screen scroller » (diapo)

The previously added CSS code also works on the module Full-screen scroller. You will proceed in the same way:

1. Add a fullscreen section (violet section) and choose the Fullscreen Scroll Curder module.
2. Add your slides without forgetting to put, for each of them, a background image with the parallax + CSS effect.
3. On the Advanced tab, add one of the 6 CSS classes created previously.

And here's the result: with every slide change, the effect will be activated!

5 - In conclusion: an easy and simple but somewhat limited zoom effect...

If you tested this tutorial, you realized that it was not hard to add a Ken Burns effect on some images. I find the effect successful and easy to implement.

However, you may have noticed that there are some limitations, in particular the fact that this animation only activates once when loading the page. This is not awkward for a full screen header located at the beginning of the layout, but if you put this module at the end of the page, it will never be seen...

The code should therefore be adapted with Javascript so that animation is played only when the element enters the screen... Don't hesitate to ask for help from ChatGPT, for example, to get there...

As for the Scroll Curder, the animation comes out every slide change, so it's not a problem!

Also, you will find another tutorial on the site of ElegantThemes to add Ken Burns effects directly to image modules, lines and sections.

Tell me in comment if you like this effect Ken Burns!