Skip to main content

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

Learn how to create and apply the Ken Burns effect to images using Divi’s built-in options and custom CSS.

Adding dynamic visual effects to your website can greatly enhance its appeal and engage visitors. The "Ken Burns Effect" is a popular technique that smoothly zooms and pans over an image, creating a sense of movement and depth.

In this article, we will guide you through the process of creating and using the Ken Burns Effect in Divi.

The Ken Burns effect is a type of panning and zooming effect used in video production from still imagery. The name derives from the extensive use of the technique by American documentarian Ken Burns.
​
We will use the Fullwidth Header module to demonstrate how the Ken Burns Effect can be created and applied.

  1. Add a Fullwidth Section

  2. Add the Fullwidth Header module

    Divi - Fullwidth Header module

  3. Set the Title, Subheading text, and any content you want

  4. Go to the Background option → Background Image and set the desired image

  5. Enable the Use Parallax Effect option

    Divi - Fullwidth Header module Background settings

  6. Go to Design Tab → Layout and enable the Make Fullscreen option

    Divi - Fullwidth Header module Layout

  7. Go to Advanced Tab → CSS ID & Classes → CSS Class and use one of the following CSS classes:

    1. kb-zoomin – zooms in on the image

    2. ​kb-zoomout – zooms out from the image

    3. kb-zoomin-right – zooms in and pans right on the image

    4. kb-zoomout-right – zooms out and pans right on the image

    Divi - Fullwidth Header module CSS Class

  8. Go to Divi → Theme Options → General Tab → Custom CSS and add this CSS code:

    .kb-zoomout .et_pb_slide .et_parallax_bg {
      animation: zoomout 7s forwards;
      -ms-animation: zoomout 7s forwards;
      -webkit-animation: zoomout 7s forwards;
      -0-animation: zoomout 7s forwards;
      -moz-animation: zoomout 7s forwards;
    }

    .kb-zoomin .et_pb_slide .et_parallax_bg {
      animation: zoomin 7s forwards;
      -ms-animation: zoomin 7s forwards;
      -webkit-animation: zoomin 7s forwards;
      -0-animation: zoomin 7s forwards;
      -moz-animation: zoomin 7s forwards;
    }

    .kb-zoomin-right .et_pb_slide .et_parallax_bg {
      animation: zoomin-right 7s forwards;
      -ms-animation: zoomin-right 7s forwards;
      -webkit-animation: zoomin-right 7s forwards;
      -0-animation: zoomin-right 7s forwards;
      -moz-animation: zoomin-right 7s forwards;
    }

    .kb-zoomout-right .et_pb_slide .et_parallax_bg {
      animation: zoomout-right 7s forwards;
      -ms-animation: zoomout-right 7s forwards;
      -webkit-animation: zoomout-right 7s forwards;
      -0-animation: zoomout-right 7s forwards;
      -moz-animation: zoomout-right 7s forwards;
    }

    .kb-zoomout .et_parallax_bg {
      animation: zoomout 17s forwards;
      -ms-animation: zoomout 17s forwards;
      -webkit-animation: zoomout 17s forwards;
      -0-animation: zoomout 17s forwards;
      -moz-animation: zoomout 17s forwards;
    }

    .kb-zoomin .et_parallax_bg {
      animation: zoomin 17s forwards;
      -ms-animation: zoomin 17s forwards;
      -webkit-animation: zoomin 17s forwards;
      -0-animation: zoomin 17s forwards;
      -moz-animation: zoomin 17s forwards;
    }

    .kb-zoomin-right .et_parallax_bg {
      animation: zoomin-right 7s forwards;
      -ms-animation: zoomin-right 17s forwards;
      -webkit-animation: zoomin-right 17s forwards;
      -0-animation: zoomin-right 17s forwards;
      -moz-animation: zoomin-right 17s forwards;
    }

    .kb-zoomout-right .et_parallax_bg {
      animation: zoomout-right 7s forwards;
      -ms-animation: zoomout-right 17s forwards;
      -webkit-animation: zoomout-right 17s forwards;
      -0-animation: zoomout-right 17s forwards;
      -moz-animation: zoomout-right 17s forwards;
    }

    @keyframes zoomout {
      0% {
        -ms-transform: scale3d(1.5, 1.5, 1.5) translate3d(-0px, 0px, 0px);
        -webkit-transform: scale3d(1.5, 1.5, 1.5) translate3d(0px, 0px, 0px);
        -o-transform: scale3d(1.5, 1.5, 1.5) translate3d(0px, 0px, 0px);
        -moz-transform: scale3d(1.5, 1.5, 1.5) translate3d(0px, 0px, 0px);
        transform: scale3d(1.5, 1.5, 1.5) translate3d(0px, 0px, 0px);
        animation-timing-function: linear;
      }

      100% {
        -ms-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
        -webkit-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
        -o-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
        -moz-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
        transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
      }
    }

    @keyframes zoomin {
      0% {
        -ms-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
        -webkit-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
        -o-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
        -moz-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
        transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
        animation-timing-function: linear;
      }

      100% {
        -ms-transform: scale3d(1.5, 1.5, 1.5) translate3d(-0px, 0px, 0px);
        -webkit-transform: scale3d(3.5, 3.5, 3.5) translate3d(0px, 0px, 0px);
        -o-transform: scale3d(1.5, 1.5, 1.5) translate3d(0px, 0px, 0px);
        -moz-transform: scale3d(1.5, 1.5, 1.5) translate3d(0px, 0px, 0px);
        transform: scale3d(1.5, 1.5, 1.5) translate3d(0px, 0px, 0px);
      }
    }

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

      100% {
        -ms-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
        -webkit-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
        -o-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
        -moz-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
        transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
      }
    }

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

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

  9. Save the changes

The result can be seen in the video below:

Did this answer your question?

Related Articles