How to Create and Use the “Ken Burns Effect” within Divi

Posted on March 1, 2017 by in Divi Resources | 109 comments

How to Create and Use the “Ken Burns Effect” within Divi

The “Ken Burns Effect” was named after American Documentarian Ken Burns for the way he made still images seem to come alive in his movies through a combination of panning and zooming techniques. The effect’s popularity has grown to extend well beyond film and television to just about anywhere that still images meet motion, including the web.

The “Ken Burns Effect” is a great tool for web developers who want to engage their site visitors with visual storytelling. That’s why in today’s post I’m going to show you a way to add this effect to Divi’s fullwidth header module and fullwidth slider module slides. However, its application extends to the other Divi sections and modules as well.

Once you understand the CSS behind the effect, you will have more control over the way your background images move. What I’m showing you today will serve as a great asset in your future projects.

Let’s get started!

How to Create and Use the “Ken Burns Effect” within Divi

Subscribe To Our Youtube Channel

Implementing the Design Using Divi

Adding the “Ken Burns Effect” to the Fullwidth Header

Deploy a fullwidth section and add a fullwidth header module.

Select to modify the Fullwidth Header Module Settings. Under general settings update the following:

Title: [enter title]
Subheading Text: [enter subheading text]
Text Color: Light
Text & Logo Orientation: Center
Make Fullscreen: YES
Enter Background Image
Background Overlay Color: rgba(0,0,0,0.28)
Use Parallax effect: YES
Parallax method: CSS

Important Note: The “Ken Burns Effect” will not work unless the CSS parallax method option is selected. I won’t get into the details, but this is how you target the background image using css. Also, this effect will NOT work with the true parallax method. It must be CSS parallax. I explain later how to disable the parallax later if you decide you don’t want it.

Now go to Advanced settings and update the following:

Title Font Color: #ffffff
Title Font: Bold (B) and Capitalize (TT)
Title Font Size: 80px
Subhead Font Color: #eeefa0

Under Custom CSS you need to add a CSS class. This is what triggers the “Ken Burns Effect” via CSS. I’ve included four options to choose from. Here is a list of each with a short description:

kb-zoomin – zooms in on the image
kb-zoomout – zooms out from the image
kb-zoomin-right – zooms in and pans right on the image
kb-zoomout-right – zooms out and pans right on the image

For now, add the “kb-zoomin-right” CSS class.

Save & Exit

It’s time to add our CSS for the “Ken Burns Effect”. Go to Divi → Theme Settings and enter the following in the Custom CSS section:

.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);

}
}

Go check out your header now to see the effect in action.

Here is a gif to show you what it should look like. Bare in mind that the gif shows the movement as choppy. This will not be the case on your website.

Adding the “Ken Burns Effect” to a Fullwidth Slider

Deploy a fullwidth section and add a Fullwidth Slider Module.

Select to modify the Fullwidth Slider Module Settings. Under general settings update the following:

Controls: Hide Slider Controls
Automattic Animation: ON
Automatic Animation Speed (in ms): 6000
Use Parallax Effect: YES
Parallax Method: CSS

Under Custom CSS add the CSS class “kb-zoomout”. Since this is a slider, I recommend disabling the parallax effect so go ahead and add another css class called “no-parallax” next to “kb-zoomout”. I’ll explain more on the no-parallax option later.

Save & Exit

Under General Settings, add your first slide and this will take you to the Slide Settings. Under General Settings update the following:

Heading: [enter your heading]
Upload a background image (the size should be at least 2500px wide and 800px high)
Background Image Size: Cover
Use Background Overlay: YES
Background Overlay Color: rgba(0,0,0,0.28)

Save

Now duplicate your slide to create a total of four slides.

Go back and update the additional slides with whatever image and header you want.

Save & Exit

Check out your slider now on the live site. It should look like this:

Disable Parallax But Keep The “Ken Burns Effect”

Unfortunately, this method only works with the parallax option selected. This is cool because it allows you to have both parallax and “Ken Burns Effect” happening simultaneously. But sometimes you may not want parallax, especially for sliders.

If you want to disable the CSS parallax method but still keep the “Ken Burns Effect,” add the following custom CSS in the Custom CSS section under Divi → Theme Settings:

.no-parallax .et_pb_parallax_css {
    background-attachment: inherit;
    background-position: center center;
}

.no-parallax .et_pb_slides .et_parallax_bg.et_pb_parallax_css {
    background-attachment: inherit;
    background-position: center center;
}

Now simply add an additional class called “no-parallax” next in your Custom CSS section of your module settings right next to the “Ken Burns Effect” class. For example if you want a zoom-in effect without parallax you would add “kb-zoomin no-parallax” for your CSS class.

Use It Anywhere!

This effect is not limited to the fullwidth headers and sliders. You can also add this effect to any standard section. To do this go to the section settings. Under general settings, add your background image and make sure to select the CSS parallax method. Then add your CSS class under Custom CSS.

For standard sliders, just modify the slider module settings. Make sure to select the CSS parallax method and update your CSS class.

Modifying the CSS for Different Effects

If you want to change the speed and direction of your image animations, you need to update the custom CSS you added to your theme settings.

Let’s take the kb-zoomout CSS for the fullwidith slider as an example:

.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;
}

The same animation property is repeated 5 times so that it works on all browsers. But each one has three values: zoomout, 7s, and forwards.

The value “7s” represents the animation duration in seconds. Change this to increase or decrease the time your animation take to complete.

The property “forwards” represents the animation fill mode. Change this to “infinite” if you want the animation to loop.

The value “zoomout” is the animation name that calls the animation set in the following CSS:

@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);

}
}

What’s important about the CSS settings above are the 1.5’s and the 1.1’s next to the scale3d value. This controls the size of your image. The 1.5 essentially represents 150%. So this code tells your image to take on 150% of its original size. The 1.1 is 110% of the original image size.

You will notice that the 1.5’s are under the 0% and the 1.1’s are under the 100%. The 0% section represents the start of the animation and the 100% represents the end. So here the image starts at 1.5 (150%) and ends at 1.1 (110%). You can change these values so that your image can start bigger or smaller and end bigger or smaller. For example, you may want to change all the 1.5’s to 1.3’s so that your image doesn’t zoom in so far and end up looking too grainy.

The value “translate3d(0px,0px,0px)” is the part of the code that changes the position of the image according to the x,y, and z axis. You can change the x and y axis to adjust the image. For example if you want the image to move to the right 30px and down 50px, change the values to (30px, 50px, 0px).

The animation-time-function specifies the speed curve of an animation. Right now it is set to linear which basically means that the speed stays the same throughout the animation. You can change this to other values like “ease”, “ease-in”, “ease-out” to modify the speed curve.

Final Thoughts

I hope you take advantage of the “Ken Burns Effect” on your website. Implementing it with Divi is simple. Now you don’t have to rely on limiting and bloated plugins to do this for you. Plus, once the CSS is in place, you can use it on any section of your site with a few simple steps.

If you have any questions or feedback doesn’t hesitate to post a comment.

Enjoy!

109 Comments

  1. Hi Jason, Great effect. I have just started creating my website and this look awesome. Just one question. The effect just happen once, and then the image stays static, Is there a way to meke it happen again? Like a loop. Thanks

    • There are examples of looping kb effects out there. I think the principles of:

      animation-iteration-count:infinite;
      animation-duration: 30s !important;

      would need to be added but I’m typing this on my phone right now which is not proving very successful!

    • Yes I made a comment on this in the post. “The property “forwards” represents the animation fill mode. Change this to “infinite” if you want the animation to loop.” Does that make sense?

      • Makes “alternate” also sense?

      • Thanks a lot Jason, Now I have that loop behavior. I guess I was so excited with the effect that I totally missed that. Keep posting great content like this.

  2. Why can’t Divi just have that integrated out of the box? Adding some of the functionality like the Revolution Slider would be freaking awesome. Actually, all of these tutorials you post would be great to have in the Divi theme out of the box.

    • I’d ditto that sentiment; but I think one option that would save me hours of work would be a gallery slider that lets you have multiple images per slide as one of the options. So many people want carousels and I’d love to use one less plugin or manually edited code module.

    • Hi Jorge,
      The feature sets you describe shouldn’t be in a theme. It would bog down the theme way to much. That’s the purpose of plugins.

      I do think Elegant Themes should encapsulize these various published features across a series of plugins. That would be a great!

      • Jason Champagne

        Interesting, Peter. I agree. Thanks for the input.

  3. Finally! Thanks! I’ve been waiting for this for ages. I tried it with CSS but never achieved the result I wanted. Can’t wait to try it.

    • Jason Champagne

      You’re welcome. Let me know how it goes, Raquel.

  4. Great idea! Thanks a lot.

  5. Thanks for the effort Jason! Will adding this effect page load performance? Thanks

  6. This is great, thank you!

  7. I’m not crazy about this effect, along with other constant movements and busy screens. It makes me dizzy, and I know of people who get migraines from it. Please be thoughtful about using this in your sites.

    • Jason Champagne

      It’s definitely not for every site for sure. And a good rule of thumb is to keep the movement very slow. Subtlety is key.

  8. I have tried to get it to work on my fullwidth slider and It won’t work. I followed you directions with no luck.

    • please disregard, I did not add the Css to the divi tab.

  9. Nice! The effect is a bit “jerky” though – is there a way to “smooth” the transistions?

    • Jason Champagne

      Gary,

      If you are referring to the gif I used on the post then yes, it is jerky. I made a comment on that in the post. The result on an actual website is quite smooth.

  10. This is absolutely amazing! took me just 3 minutes to implement on my website!
    **off to find more high res stock images**

    Thank you so much Jason!

    • Jason Champagne

      That’s what I like to hear! Awesome Liran. Glad I could help.

  11. I don’t really like the “jerky” look… If there is not a way to smooth it out, I would opt for doing the pan and zoom in a video editor and making it a tiny video. I know it’s more overhead, but it would be worth it (to me) for the smooth look.

    • Nathan B. Weller

      As the post states, the “jerky” look is a result of recording the effect in a gif. The effect on your website will be much smoother.

  12. Is it possible to hold the image static, briefly, before the Ken Burns effect commences?

  13. Hi Jason

    The effect looked so brilliant and I was looking forward to applying it. Spent over an hour following your very clear instructions and applied it to everything and not one single thing worked (((( Darn as it would be fantastic. No idea why, but guess it is something technical with my browser or server !

    • Try clearing all your caches?

  14. Cool post!

    BUT can you guys share some details on the new styling of the site?

    I LOVE the new look, is it achievable in Divi? It’s a great improvement.

    • Nathan B. Weller

      I’m happy to say that we’re working on that right now 🙂

      It won’t be how our site was created, since it’s custom. But we’ll show how to achieve our new blog design in Divi.

  15. The Ken Burns Effect has a moth effect; people are automatically drawn in.

    The step-by-step provided makes using this powerful effect, simple & easy.

    Thank you!

    • Interesting comment about the moth effect, as I have attended the Moth Storytelling event and the description is apt. I am foremost a writer, a storyteller. I first saw the Ken Burns effect in use by my friend and documentary filmmaker Michael Rossato-Bennet in his Sundance Festival audience favourite Alive Inside. The film talks about music and memory and how recalling favourite pieces can invoke moments of lucidity and clear recollection in Alzheimers survivors. When Michael showed still B&W or sepia photos of the individuals in their past lives he used the Ken Burns effect to visually animate them, just as in the present their favourite music brought them “back” to life. This was a powerful visual storytelling technique and I was indeed drawn into the personal narratives through it. I am grateful to Jason Champagne for sharing the background story and his methodology for this animation technique which I did not previously know the name of. I am not using Divi yet and wonder if I could employ the KB effect within one of the other Elegant Themes, bearing in mind that while I do my own websites I am not trained as a developer and am a bit of a hack at this! I will do a blog post on the Ken Burns technique as a visual storytelling method once I get my newest website thestoryfinder dot com up (after I select a theme!) Glenda MacDonald

  16. Simply awesome and should make it into the normal build.

    Thanks!!

  17. HI! This is just what I needed…but, the project I am working on is fixing what someone else did (or didn’t do). I am only using the Divi Builder plugin. Where do I put the CSS?

    • I am so spoiled by Divi, that I forgot about the child theme… I added the css to the stylesheet, but no effect. See you over in Support!

  18. Hi Jason,

    I’m currently building my site and would like to include this effect. Is is possible to cut and paste your CSS? Will that work.

    Thanks for the great article!

    • Jason Champagne

      Peter,

      Assuming you have put your “material” class in your module and activated css parallax for your background image, it should work. I would check through the tutorial if you get stuck.

  19. It would be cool to see this live on a demo page.

  20. Hello!
    I just added the effect but it’s very strange. On the mobile phone (iPhone 6s) I can see it but the effect does not appear on the computer. I’m using Safari and Google Chrome.
    Why can not I see it?

    • same here. On my Desktop and mobile the effect is enabled, while on laptop is disabled.

  21. Omg, thanks for this one!!!

  22. Your animation zoomin at 100% should be at 1.5 isnt it for webkit? but on your css above is -webkit-transform: scale3d(3.5, 3.5, 3.5) translate3d(0px, 0px, 0px);

    • Yes, I noticed that as well for the “scale3D”…I think it was a glitch on the tutorial? Also, some of the “animation” timing was off (set at 17s) instead of the 7s.

      I changed all my “animation” timing to 7s and any “scale3D” 3.5 to “scale3D” 1.5; and it all worked perfectly well.

      Hope that helps! 🙂

      P.S. LOVE the effect and it was super easy to implement and change settings to make the effect match the look/feel of the site. Thank you!

  23. Hello Elegantthemes Team!

    Very nice blog layout! Really good! 🙂

    I will request a webinar series / tuts on how to achieve a blog this a layout like this one.

    Thanks for replying me.

    • Nathan B. Weller

      Request received! We’re actually working on a post or two right now to show everyone how to achieve our new blog design in Divi. We’ll probably publish them next week 🙂

      • Hello Nathan,

        Really many thanks for replying me.

        This blog layout is a MUST HAVE and opens doors for blog posts, video posts and audio posts with little customizations.

        The two columns in the front page is very good looking and the fullwith layout post is awesome and very trendy!

        Even the font is good 🙂

        You rock @Nathan and ET Team!

        N.B.: If you allow me… How to take the most from new jetpack personal (39$) with Divi 😉 Specially for the video hosting.

  24. Thank you very much for this tutorial!

    I’m wondering about one line of your CSS code, it’s for the zoomin part:

    -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);

    Is the 3.5 in the second line a mistake or for any reason? The other options don’t have the 3.5 but a 1.5, as all the other lines…

    • Interesting catch. I think you are correct in assuming all values across vendors should be the same. Therefore the 3.5 is most likely an error.

    • Jason Champagne

      Klaus,

      Sorry. That is a mistake. They should be 1.5.

      • Would be so kind of you if you would change this in the OP, thank you for the great work.

  25. Thanks for all the coding, I will also try this.

  26. Thanks, I didn’t know the name but I’ve seen the effect in a few sites and it really looks amazing. Would it be possible to only start the effect when a user hovers an image on a portfolio for example?

    • That would be a good option.

  27. Thanks Jason, very cool stuff! Is there a way to apply this effect to a fullwidth image module and / or a regular image module, i.e. NOT a background image. I do have a child theme. Thanks and really enjoying your design tutorials!

  28. Great work Jason, very detailed; it only took me a few minutes to add.

    Does anyone know how to get the image to move back in the opposite direction in which is moved? I don’t want it to loop, just zoom in right, zoom out left over and over.

    Thanks 🙂

    • Hi Brandon,

      I think I understand you, I would like to revert the movement in each iteration in order to avoid the jump with “infinite” characteristic. I mean, when the movement towards right finish the image starts a movement to left and when finish starts another movement to right, so in loop.

      I hope Janson listen us 🙂

    • Heyyyy!!! I get it!

      In the property animation you have to put (this example is over zoomout-right with a movement of 40sec):
      animation: zoomout-right 40s linear infinite alternate both;

      even if you want to have a delay (for example 3sec) between movement, you can put:
      animation: zoomout-right 40s linear 3s infinite alternate both;

      You can see it in http://www.mitch.es

      The final code:
      .kb-zoomout-right .et_parallax_bg {
      animation: zoomout-right 40s linear infinite alternate both;
      -ms-animation: zoomout-right 40s linear infinite alternate both;
      -webkit-animation: zoomout-right 40s linear infinite alternate both;
      -0-animation: zoomout-right 40s linear infinite alternate both;
      -moz-animation: zoomout-right 40s linear infinite alternate both;
      }

      Regards!

      • Hello Sergio

        If I add the code as it is in the example that Jason says the image in the phone is not responsive ie it moves to the left leaving on the right side a white border.

        I have seen your website on the phone and it looks great, there is no margin left.

        You can indicate to me how you could do it.

        The effect you have added I think works better in the mobile since it does not scroll the image but it stays in the cnetro.

        Thanks Sergio ..

  29. Would be wonderful having an option to give custom class to single slide in a slider, to have different effect each slide.

    • Jason Champagne

      That’s a great idea! I’ll look in to that.

    • Agree.

  30. Using zoom-in effect with sliders causes annoying 150% to 100% zoom jump before the slide change. Is it possible to avoid it?

    • On Safari 10.0.3

  31. Jason this is the best blog description of a Divi effect that I have seen.
    It is because of your great visual screen shots of the Divi layouts with your arrows and notes. This makes it alot easier to understand and makes me more likely to go and try this Ken Burns style option. Please keep using the screen shots in large size and your red arrows…..you are a great blogger. Thank you.

  32. So after reading the article and finding the effect very pleasing, I decided to try it. I carefully followed the directions to the best of my ability. I copied and pasted the custom CSS into the Theme Customizer, no luck. I tried pasting into my child theme’s style CSS, no luck. I tried putting the CSS in the Custom CSS area of Theme Options, no luck.

    I cleared by browser’s cached data, no luck. Wondering what the heck I’m doing wrong. It is a very cool effect and I’d love to have it on my site. Can anyone help me?

    http://careerconfidentialtraining.com/dev/

    • Jason Champagne

      Sorry about that Carl. I would need more info to be of any help. Maybe check to see if you are putting your CSS class in the right place in your module settings?

    • Jason Champagne

      Looks very cool!

  33. Very cool! Is there a way to make it animate on scroll like a regular parallax effect?

  34. I tried the full width slider method as well, no luck. I didn’t try it with the custom CSS in all three positions, just in the Custom CSS area of the Theme Options.

    Any idea what I’m doing wrong? Full Width header is up first, followed by the Slider effect.

    http://careerconfidentialtraining.com/dev/

    • Jason Champagne

      I’m not seeing any css classes asigned to your module. (ie. “kb-zoomin”) Are you sure you added it?

  35. Great Tutorial. Cpl things I’ve discovered. For some reason if I past the CSS using the WP editor into my Child Theme CSS file it will not work. If I past it into the Child Theme customize CSS window it works, but does not show up in my Cild Theme CSS within the editor.

    On Mobile and Tab using the Zoom in Right class there is an empty area of space starting on the right that the image then zooms into. Is this normal. Is it an Effect not really meant for mobile or Tab? Thanks.

    • Jason Champagne

      Thanks, Ken. Normally you would disable the effect on mobile. As for the empty space, the image is moving too far outside of the container so you would need to have a bigger image or not move it so far along the x or y axis. Make sense?

  36. Love it! Thank you off to go and play with it!

  37. Also, the first two options – zoomin and zoomout work best on mobile, for me anyway.

  38. Great effect!

    I try some testing if it suits our page.

  39. As suggested by others, why hasn’t Elegant Themes made a plugin with all these effects. WOW Slider has had these effects for a long time in their products. Elegant Themes needs to expand their product line.

  40. This is great !! Thanks

    I use your method on my website. It’s perfect on desktop.

    But, when i open my website on my mobile, the ken burns effect doesn’t work.

    I want to build a mobile first website.

    Thank you in advance for your support,

  41. Just perfect ! Thank you Jason & Elegant Team !

  42. Does anyone get a grey bar on mobile on the right with this? it seems the narrower teh window the larger the grey bar

    • I’m having a similar issue where if I scroll down past my image too fast there is a bar of bg color that appears and changes size as the zoom effect moves.

  43. Hey! Thank you so much! I love the way this turned out! My only issue is, it doesn’t seem to be mobile friendly. At least not on my iPhone 6s. Am I missing something?

    • Jason Champagne

      Emma,

      Usually this is effect is disabled on mobile because of this reason. The images will need to be either bigger or positioned differently to accommodate for all mobile devices.

  44. Brilliant stuff! Took me all of 5′ to implement, too. Whoever wrote this is a genius… Thanks, guys!

    • Jason Champagne

      Awesome Nicholas! So glad you like it.

  45. Awesome tutorial and code editing instructions. Just what I needed and implemented on a new build.

    Is it possible to vary the effects between slides? EG I’d like zoom in on some, zoom out on others to mix it up.

    • Jason Champagne

      I’m sure this is possible with CSS. I will look into this.

  46. This works just fine BUT no matter what I do the speed doesn’t seem to change. Is this an issue or am I missing something? I have done a hard refresh of the page so it’s not a cache issue.

    • Jason Champagne

      What is the CSS you are using to change the speed?

  47. This is great stuff, thanks. I’m having an issue where if I scroll down past my image too fast there is a bar of bg color that appears and changes size as the zoom effect moves. Thoughts?

    • Jason Champagne

      Maybe try a bigger image. It sounds like your image is being moved too far so that the background color appears.

  48. Hi, this is really cool, but for some reason it will just freeze up on me. If I then click an arrow, it will have the effect on that image, and then stop again. Any advise? Thanks

    • Jason Champagne

      Sounds like you may have an issue with the timing of your animation and the timing of your slide transitions. Are you using the same settings as in this tutorial?

  49. Hi guys.

    Great job.

    Will there be a update in the near future for this to be mobile friendly?

    • Jason Champagne

      Maybe so. I would suggest disabling this feature on mobile until then if it is giving you problems.

      Thanks

  50. The effect works fine on desktop but when the browser is narrowed down to the size of a mobile phone, it becomes like this:

    https://i.imgur.com/A9lW0x2.png

    That is to say, the section contracts and moves away from the right margin.

    Please advise.

    Eden

    • Jason Champagne

      Thanks for the feedback, Eden. I would suggest disabling the effect on mobile until we can find a better fix. Thanks.

      • You can’t disable the effect on mobile without at the same time disabling the entire picture. That is to say, there will be no picture on that section at all.

        Regards,

  51. Well I totally failed at this. I don’t know what I did wrong. I had to revert back to the old way of doing things. Nice try I guess?

  52. Great tutorial – BTW did not work for me when I was adding the CSS code to Divi Theme Options – had to actually add them in CSS on specific page – Custom CSS. Works magic 🙂

  53. Hi Jason
    How do I make the image not move in the phone ..? Since a white margin appears to the right and I have tried it with a very high resolution image and the same thing is still happening .. Please tell me what I should delete to do it ..

    Another thing I have seen in the forum that using “zoomout-right” I have changed it in the css title but it does not work, you could tell me if I want to put that option that I should add.

    I have seen that Sergio has done with this option and in the mobile does not scroll the image with what looks good this is the web http://mitch.es

    Thanks for everything

    • Jason Champagne

      It looks like the example site you referred to is using zoomout as to effect and not zoomout-right. Maybe try adding the class”zoomout” instead?

      • Yes, Jason, I have. I have added “zoomout” to the css instead of “zoomout-right” but it does not make me any effect does not work .. Should I add another code in the css maybe.? Thank

    • Hi,

      I, too, have noticed that Sergio @ http://mitch.es managed to get the Ken Burns effect working in mobile without the leaving a big white margin on the right.

      How did he do that ?

      Eden

  54. I’ve been working on a website trying to figure out a way to make it “pop.” This is exactly what I needed! Just that small change really made the website I was working on stand out. Thank you so much for taking the time to write this article along with the pictures of how to get it to work.

  55. Hi Jason
    I would like to ask if there is any way to use these effects for normal images? Not only for slider but for any image
    Thanks, I await your response.

554,210 Customers Are Already Building Amazing Websites With Divi. Join The Most Empowered WordPress Community On The Web

We offer a 30 Day Money Back Guarantee, so joining is Risk-Free!

Sign Up Today

Pin It on Pinterest