Like our free content? Then you'll love our exclusive Club!
Divi Academy Membership gives you exclusive access to over 110 resources, including child themes, layouts, cheatsheets, tutorials, live training and member perks. And new content is added EVERY Monday!
UPDATE: Code adjusted to work with Firefox 
Recipe #21 is a question that was asked by Peter Bartolomy in the Divi Facebook groups. At the time I was going through my Evernote looking for an idea for my next recipe and that post jumped out at me as it was something I thought a decent header should be able to do without the need for an extra plugin. Most people will use Slider Revolution or similar to achieve this effect but Peter wanted a solution without a plugin so as ever, the need to solve the problem took over ;).
Peter was trying to implement the effect from this Codepen and whilst I have changed the code quite substantially, that was my starting point. The main difficulty with implementing this effect on the Divi fullwidth header is that it needs to be added to the background image, and the background image does not have a CSS class or a box in the module’s custom CSS tab to add code so the usual solution would be JS or PHP, but I wanted to do it with just CSS.
You can view the demo here which is on loop so you can see the effect without having to reload the page, but the code in the recipe stops the effect when it is finished.
Watch the video, get the code you need in the accompanying blog post, be sure to scroll to the bottom for your fabulous freebie, and let me know what you think in the comments!
So let’s get cooking!
Ingredients
The Divi Theme from Elegant Themes
An active child theme
An suitable image sized at 1920 x 1200px.
Cooking time
This should take you around 5 minutes max.
Preparation
The first thing we need to do is set up our section. So add a new fullwidth section and then add the fullwidth header module.
Open the module settings and click on the Custom CSS tab, give the module a CSS Class of ds-kenburns-header.
In the General Settings tab, set Make Fullscreen to Yes, then add your title, subtitle and buttons and any other settings you want but DO NOT add a background image, we are going to do this with CSS. Then Save & Exit.
The final thing we need to do with the header is to open the section settings and set the Transparent Background Color option to Yes, this is very important as without doing this you won’t see your image.
Method
The only other thing we have to do to get this effect working is to add the CSS. So copy and paste the code below into your child theme stylesheet or your Divi Options custom CSS Box.
What we are doing with this CSS is:
- Setting the position of the module to relative so we can apply an absolute position to the background image
- Adding the background image using the before pseudo class and making the image slightly larger than the viewable area so when it moves we don’t get any white space around it
- Then we are scaling the size of the image and moving it a little using keyframes to create the zoom and pan which is the Ken Burns effect.
Check the comments in the CSS to see which values you might want to change to achieve the movement which best suits your chosen image.
/*-----Ken Burns Header-----*/
.ds-kenburns-header {
overflow:hidden ;
position: relative;
padding: 0;
}
.ds-kenburns-header:before {
content: "";
position: absolute;
left:0; /*Left and Top sets the alignment of the image, you may need to change these if you want the image to move in a different direction*/
top:0;
width: calc(100vw + 120px); /*We are adding some extra width and height to the image so when it zooms and pans we don't get any whitespace around it. You may need to change these values if you change the values in the keyframes section of CSS below*/
height: calc(100vh + 150px);
z-index: -1;
background: url(https://playground.divisoup.com/wp-content/uploads/2016/08/ladybug2.jpg); /*Chnange to the URL of the image you want to use*/
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
-ms-animation:move 8s ease forwards;
-webkit-animation:move 8s ease forwards;
-0-animation:move 8s ease forwards;
-moz-animation:move 8s ease forwards;
animation:move 8s ease forwards; /* This sets the duration of the effect and the value 'forwards' tells the effect to stop when its finished rather than loop. */
}
@keyframes move {
from {
-ms-transform: scale3d(1);
-webkit-transform: scale3d(1);
-o-transform: scale3d(1);
-moz-transform: scale3d(1);
transform: scale3d(1); /*This tells the image to start at its original size*/
}
to {
-ms-transform: scale3d(1.2, 1.2, 1.2) translate3d(-150px, -120px, 0px);
-webkit-transform: scale3d(1.2, 1.2, 1.2) translate3d(-150px, -120px, 0px);
-o-transform: scale3d(1.2, 1.2, 1.2) translate3d(-150px, -120px, 0px);
-moz-transform: scale3d(1.2, 1.2, 1.2) translate3d(-150px, -120px, 0px);
transform: scale3d(1.2, 1.2, 1.2) translate3d(-150px, -120px, 0px); /*This tells the image to finish at 1.2x it's original size and at a position of -150px on the X axis and -120px on the Y axis. You can adjust these values to get the effect you want*/
}
}
And that’s it.
If you found this helpful please leave a comment and subscribe to my newsletter for all my latest Divi related content.
Michelle X
You’re the best!!! You need a link with a tip jar on the bottom of all your pages. Thank you for all that you do – for free! Please email me a link to the jar if you have one – you’ve earned it!
We don’t have one but thank you for the thought <3
Not working with new divi version. CSS is showing error as menetioned by Hans Gernlein. Cannot set transparent option
The CSS is correct – WordPress does not recognize all CSS, so you will need to override that at the bottom of the stylesheet or you can place it in Divi > Theme Options > General > Custom CSS. There is also a current bug in Div with section background colors, so you will need to do that manually by setting the color and dragging the opacity option to the bottom to create the transparency.
How to loop the kenburns effect?
This recipe isn’t a slider, so it will not loop
Change forward to infinite.
Hello,
It’s not working: no image showing,even if replaced with file from the media folder… New version of Divi 3.0.89) indicates an error in the CSS: 0 instead of an o.
Not when following the tut nor downloading and installing from the zip.
Still: no go.
Unable to replicate the problem. Please check your code again.
Transparent Background Color option is missing in latest Divi. So, how can I set the transparent color of the background?
You use the slider in the background settings to reduce opacity Alam
Thanks, Michelle
Michelle I have slid those sliders all over and can’t get it to show the image. I even put in the hex code #ffffff00. Any ideas as to what I am doing wrong? Wish Divi would’ve kept that option for transparency.
Impossible to say without a link to the issue Lonnie
how can I use this with video background?
You would need to change the classes in the CSS to that of the video background classes. Although I would not advise it as it will slow your site with video and animation
Michelle – thank you for this wonderful tutorial. Works perfectly except for one thing I am not using it on Divi but with a Section background with the Elementor page builder. All goes according to plan but the image does not remain once the effect completes. I tried a few things that I could think of, including setting the Section background to the image used in the effect. This “sort of” worked but the final position and size of the image did not match the one at the end of the effect, which of course caused a “jump”. Is there… Read more »
Sorry Lyle I have not uesd Elementor so cannot help there. Try this Facebook group https://www.facebook.com/groups/Elementors/
Thanks Michelle
I am very active on that FB Group and that is how I found your tutorial
Will keep on trying.
Cheers!
Lyle
https://www.cellphonerepair.com/
placese check this link ..and how can make this slid show in divi
This isn’t a slide show, it is a video background. You can achieve this with a fullwidth header module and video background
Hi Michelle, amazing effect and thank you for the tutorial.
I’d like to know if possible to change into fullwidth-header every few seconds the background image… maybe two, three or four images.
Thanks so much
Yes it’s possible but you would need to add more images and animation via CSS. This more recent post may help by using the slider instead https://www.elegantthemes.com/blog/divi-resources/ken-burns-effect-divi
Can you apply this effect to individual slides within a slider?
Yes you can, ET recently created a post here https://www.elegantthemes.com/blog/divi-resources/ken-burns-effect-divi
Can this be accomplished on individual slides using the slider module?
Would the be an easy way to adjust the height of the header? Maybe only 400px.
Love it – thank you!
You can add max-height: 400px; in the main element area of the custom CSS tab for the module
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.
Hi Michelle, This is AMAZING – thank you so much for sharing stuff like this! When playing with the code, I tried using values of less than 1 for the starting/’from’ part of the code, moving up to 1 on the end/’to’ part – the idea being zooming in from a smaller scale and finishing at the image’s actual size to avoid any of the pixelation issues inherent with zooming in on an image to a scale larger than it’s actual size. However, when I tested it, the zooming did not work (though the panning still did). Any ideas where… Read more »
I would need a link to your site and to see your code James
Hi,
thanks for your share.
Your method works fine in a page, but it doesn’t work in posts. Do you know how to do. I have not find solution
thanks a lot
I haven’t tried this Michael but possibly the classes are different in a post, try inspecting element and check, then change the applicable classes
Awesome method… thanks! Has the code ever been posted to accomplish the Ken Burns Effect with DIVI Slider or Full-Width Slider module?
Hey Tom, not yet. I have it almost done but the issue is that background images don’t have their own class so targetting them is difficult. I only have one bug to fix in it so when I have the time I will take another look.
Michelle,
I wrote that it doesn’t work with Chrome, but now it works just fine. Thank you very much for this tutorial, I’ve spend long hours looking for a solution like that! Great job!
Welcome Jolanta
I’ve tried it with Chrome and it doesn’t work. Besides that it’s amazing!
I’m loving Divi Soup! Thanks for all the wonderful tips guys
Thanks Saul
Michelle Hi! Thank you for all the amazing things you sharing with us! This is also a very nice tutorial. Only one question. The header in my site http://www.f-it.gr looks ok on FF and CH but in IE it going all the way up. Is this something I can fix?
Thanx a lot!
IE does not support some of the CSS used unfortunately Nassos,, and I removed it from my computers long ago so I can’t really troubleshoot a fix. Sorry but I no longer design with IE in mind, just can’t do it
Hi Michelle,
Thanks for the code – great to be able to have some movement without a video.
For looping, I found this worked – ‘alternate infinite’ – in place of ‘ease forwards’.
Lots of tips here: https://css-tricks.com/snippets/css/keyframe-animation-syntax/
Hi Michell,
Thanks for the tutorial, but the FX It doesn’t work on my Firefox. Can you help me?
The post has been updated Guillermo, just use the adjusted CSS
Thanks! I’ve managed to adapt this to a full width slider module too.
The firefox issue was an easy fix. I simply replaced
@-webkit-keyframes move
with
@keyframes move
Wonderful, thanks Raj you have saved me two jobs I can now cross off my to-do list
. Can you post the slider code for everyone please?
Have we managed to get the code for the full width slider as well? I would love to be able to use this feature for multiple banner images. Thanks so much for doing a great job! You’re awesome!
Thanks Hoku
No not yet to be honest I haven’t looked at it in a while, I have one annoying bug but will get back to it as soon as I can
Is there an example of this available? I’m trying to do the same thing and have hit a snag. Thanks!
This is awesome, unfortunately it’s not all internet browsers friendly as already stated above. I hope this is getting fixed soon.
While ad it, is it possible to do an infinite loop (back and forward) just like here:
http://pxlsmth.com/
These guys did it really well and very smooth.
I hope this will motivate you
Looking forward to the update!
Hey Ronald
Yes this is possible, you can changes forwards to infinite to continue the effect and the backwards and forwards by adding another section of keyframes. Unfortunately motivation isn’t the problem, it’s time. Thankfully Raj got to the browser issue before I had a chance to look at it so check his comment for the fix
I totally feel you! If I could I would send you some extra time…. Got the same over here, that is why I’m gonna end this reply with: can someone show me the adjustments to make the effect in a loop to keep it going back and forward just like the link above?
Cheers and keep up to awesome work, Michelle!
It sure does make a difference in the Divi community.
Hello again Michelle!
When I turned off my child theme and went back to straight Divi theme the problem was rectified …. but darned if I can find that black overlay in my child theme. I know the issue has nothing to do with your CSS or effect, just thought you might have an idea where I can hunt for the culprit! Thanks in advance Michelle!
Do you have a link please Bruce?
Hi Michelle,
Love this effect, but have tried it on my site that I am practicing on and am getting what appears to be a black overlay on my image and am not sure where it is coming from???
Hi Michelle
The demo page does not seem to load for me – tried 3 different browsers – the page loads but the stylesheet is not rendered and I just see text – are you seeing this?
Should be good now Cliff, I was working on some SSL stuff which caused the problem
Unfortunately it doesn’t work with Firefox and in IE
Please find the time to solve this problem 
I will do as soon as I can Tomasz, at least Firefox anyway, I don’t go near IE
Good stuff Michelle!
Thanks Cameron
Oh Michelle, this is just fabulous. Once again you deliver something great, and once again it is accessible to bandwidth-challenged people in rural Australia. Thank you so much. I’m going to use this today!
My pleasure Cath, bet its good to be home, apart from the bandwidth
I tried changing the value of 8s to 50s to try to slow the animation but could not make it work. Is it possible to make this effect really slow? It would be very nice! Thanks a lot
Yes yoou can slow it down but 50s may be a little too much, try reducing that
Awesome tips as always! Those are really great tutorials! Thanks a lot for sharing
Pleasure Andre
Thank you very much for the tutorial, Michelle!
Best Regards!
Welcome Elisandro
This is great! Thank you! I really like how you explain what each part the CSS code does.
Thanks Bob, I am trying to make a point of doing that but sometimes I forget
Michelle,
That is an excellent tip/ recipe. I’ve always wondered how that effect was achieved. At first glance it seems like a video … made in camtasia studio or something. CSS only. Nice? I particularly like the way you’ve highlighted the page specific CSS area to add the code … so that it doesn’t apply to every page when not needed. Thanks for the effort. In this world of mass Divi information … nice to see a unique and differentiated tip.
Regards Mark
Thanks Mark that’s very kind
OMG, this is brilliant and easy to implement!
Used it right away on the Homepage of our blog, http://www.nestingnomads.de
Works on non-full-width-sections like a charm, too
Thanks a lot!
Looks great Chris
Another brilliant tutorial Michelle. Thanks a ton!
Welcome Rambo
It doesn’t work on my Firefox
I will be taking a look at that as soon as I have time Marianna
Hi Michelle,
Thank you for this effect. Unfortunately it doesn’t work with Firefox so if you “sell” this effect to a client, you need to find an alternative for FF.
No worries Chris, I barely use FF and the css is supported so didn’t check but will take a look as soon as I have time and post an update
Michelle, this tut is awesome! What I love about it, it gives a cool video background effect for phones and tablets, where normally you cannot obtain video for those…
Yes it’s a nice light alternative Mark, thanks
Perfect Michelle, thanks so much for this recipe. You are truly brilliant!
I dont know about that Jeff but thank you!
Hello Michelle,
that’s great idea. I like very clear instructions. It works perfect. Thank you.
Pleasure Deana
Absolutely awesome. I just went through your tutorial. What an excellent way to avoid using Slider Revolution to achieve this effect. Thank you so much for sharing your tips and tricks!
Most welcome Lisa
Hi Michelle,
thank you for the tutorial. I’m going to give it a go as the effect is very subtle and impressive. (Had to look up what the Ken Burns effect was so learnt two things at one!).
Welcome Deborah