A visually engaging hero section can instantly elevate your website and create a stronger first impression. One subtle yet powerful technique is the Ken Burns Effect—a slow zoom-and-pan animation often used in videos and modern websites to bring static background images to life.
In this tutorial, we’ll show you how to create and use the Ken Burns Effect in a Divi Section using Divi’s built-in background settings plus a small amount of custom CSS.
This is the exact technique we used on the PIXELROME homepage hero section to create a more dynamic and professional experience.
What Is the Ken Burns Effect?
The Ken Burns Effect is a slow movement animation applied to an image, usually involving:
- Gradual zoom in or out
- Slight panning movement
- Smooth continuous motion
Instead of a static hero banner, your section feels alive and premium.
This works especially well for:
- Homepage hero sections
- Agency websites
- Portfolios
- Product landing pages
- Story-driven websites
Step 1: Add a Background Image to Your Divi Section
Open your section settings in Divi and:
Go to:
Section Settings → Background
Then:
Add your background image
Choose a high-quality image
Make sure the image has enough extra space for zooming
Large wide images work best.
Step 2: Enable Divi Parallax
Still inside the section background settings:
Turn ON:
Use Parallax Effect
Set:
Parallax Method: CSS
This creates Divi’s background layer using the .et-pb-parallax-background element, which we’ll animate using CSS.
Without this layer, the effect won’t work properly.
Step 3: Add a Custom CSS Class
Now go to:
Section Settings → Advanced → CSS ID & Classes
Add this class:
ken-burns
This gives us a clean way to target only this section.
Step 4: Add the Custom CSS
Go to:
Divi Theme Options → Custom CSS
or
Child Theme stylesheet
Then paste the following code:
/* Homepage Hero - Ken Burns Effect */
.ken-burns .et-pb-parallax-background {
animation: ken-burns 25s infinite alternate;
-ms-animation: ken-burns 25s infinite alternate;
-webkit-animation: ken-burns 25s infinite alternate;
-o-animation: ken-burns 25s infinite alternate;
-moz-animation: ken-burns 25s infinite alternate;
background-color: rgba(0, 0, 0, 0.39) !important;
background-blend-mode: overlay;
}
/* Mobile Optimization */
@media (max-width: 768px) {
.ken-burns .et-pb-parallax-background {
animation: ken-burns 8s ease-in-out infinite alternate;
-ms-animation: ken-burns 8s ease-in-out infinite alternate;
-webkit-animation: ken-burns 8s ease-in-out infinite alternate;
-o-animation: ken-burns 8s ease-in-out infinite alternate;
-moz-animation: ken-burns 8s ease-in-out infinite alternate;
background-color: rgba(0, 0, 0, 0.39) !important;
background-blend-mode: overlay;
}
}
@keyframes ken-burns {
0% {
transform: scale(1) translate(0);
}
100% {
transform: scale(1.15) translate(-2%, -1%);
}
}
How This Code Works
1. Targets Divi’s Background Layer
.ken-burns .et-pb-parallax-background
This selects the background layer created by Divi’s parallax feature.
2. Applies Smooth Animation
animation: ken-burns 25s infinite alternate;
Meaning:
25s = slow cinematic movement
infinite = loops forever
alternate = moves back and forth smoothly
3. Zoom + Pan Motion
transform: scale(1.15) translate(-2%, -1%);
This creates:
Gentle zoom in
Slight camera movement
Premium visual energy
4. Improves Text Readability
background-color: rgba(0,0,0,0.39);
background-blend-mode: overlay;
This adds a dark overlay so your hero text remains readable over bright images.
Why We Adjusted Mobile Speed
On smaller screens, large background motion can feel slower or less noticeable.
That’s why we used:
8s ease-in-out
This makes the effect feel more responsive and polished on mobile devices.
Pro Tips for Best Results
Use the Right Image
Choose backgrounds with extra room around the subject so zooming doesn’t crop awkwardly.
Keep Motion Subtle
Too much movement feels distracting. Small motion feels premium.
Maintain Contrast
Always check text readability over animated backgrounds.
Test on Mobile
Some animations feel different on phones, so always preview responsive layouts.
Why This Effect Works for Business Websites
Small details create strong first impressions.
A polished hero section can help your business website feel:
- More modern
- More professional
- More premium
- More trustworthy
- More memorable
When visitors land on your homepage, design quality influences trust within seconds.
Final Thoughts
The Ken Burns Effect is a simple way to make your Divi website feel more alive without relying on heavy sliders or complicated plugins.
By combining:
- Divi Background Settings
- CSS Parallax
- Custom Animation
- Smart Overlay Styling
…you can create a hero section that instantly stands out.
If you want your website to feel more modern and conversion-focused, subtle motion like this can make a real difference.