Skip to main content
All CollectionsTroubleshooting and FAQsFrequently Asked QuestionsGeneral
How to Create and Use the "Ken Burns Effect" in Divi
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.

Updated over a week ago

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:

Related Articles
How to Create a Full-Screen Slider Using the Slider Module
How to Add an Overlay Over a Background Video
How to Create a Fixed Navigation that Sticks to the Top When the Page is Scrolled Down
How to Create a Collapsible Mobile Menu While Keeping the Parent Links Active
How to Create a Divi Hero Section With Full Height
Did this answer your question?