The Ken Burns effect adds slow, continuous pan-and-zoom movement to a static background image, giving an otherwise still hero section or banner a sense of depth.
What It Does
The Container block’s Background Deep Layer includes a Ken Burns Effect toggle that, once a Creative Image background is set, slowly zooms and pans that image for as long as the section stays on screen.
Why It Matters
A perfectly still full-width photo can read as a flat, static slide instead of a living page. The slow, continuous motion of a Ken Burns pan signals intentional design without the distraction of fast animation or the weight of an autoplaying video file.
What You Get
A Ken Burns Effect toggle on the Container’s Creative Image background, with an Effect Direction choice (normal or alternate) and an Effect Duration (speed) control, rendered in pure CSS with no extra image export or video file needed.
Benefits
- Adds motion using the same static image already uploaded for the background, with no separate video export or extra page weight.
- The Effect Direction and Duration controls let one image feel different on different sections without touching the file itself.
- Because it is layered on the Creative Image background type, it inherits the same responsive image settings as any other Container background image.
Capabilities
- Ken Burns Effect toggle – enables the pan-and-zoom animation on a Creative Image background.
- Effect Direction – set to Normal for a one-way pan/zoom, or Alternate to reverse direction back and forth continuously.
- Effect Duration (Speed) – controls how many seconds one pan/zoom cycle takes; a longer duration reads as a subtler, slower drift.
How It Works
Ken Burns Effect is a toggle nested inside the Container’s Creative Image background option (Style > Background Deep Layer), so it only appears once Background Effect is set to Normal Background Image and requires no Auto Moving Background Image or Special Image Hover Effect running at the same time, both of which drive their own competing transforms on the same image.
How to Use It
Add the Container block with the appropriate layout to the page and follow the steps:
1. Go to Style > Background Deep Layer.
2. Select Creative Image from the Select Background Option dropdown.
3. Add your image from the Background Image section and set the background image options.
4. Select Normal Background Image from the Background Effect dropdown.
Note: Do not combine the Auto Moving Background Image option with the Ken Burns effect; running both at once produces an inconsistent result.
5. Leave the Special Image Hover Effects dropdown unset; those hover effects do not work together with the Ken Burns effect.
6. Enable the Ken Burns Effect toggle.
7. From Effect Direction, choose Normal or Alternate.
8. Set the pace from Effect Duration (Speed).
Save and preview the section on the front end to see the Ken Burns pan/zoom in motion.
Use Cases
- A homepage hero banner where a single high-resolution photo needs to feel alive without an actual background video
- An About or Story section background that slowly reveals more of a wide landscape or team photo as visitors read
- A full-width call-to-action section where subtle motion draws the eye without competing with the button
Limitations
- Only works on the Creative Image background option with Normal Background Image selected; it cannot be combined with Auto Moving Background Image or the Special Image Hover Effects.
- A reported case with a full-width hero image gallery on Elementor+Nexter (ticket #10521) found the section not stretching full width; that turned out to be a Content Width/layout setting rather than a Ken Burns-specific limitation, but it is worth checking first on any gallery-style hero.
- Because the effect is continuous CSS animation, it keeps running for as long as the section is visible; it is not a one-time reveal animation triggered on scroll.
Troubleshooting
- The Ken Burns pan/zoom is not visible at all: confirm Background Effect is set to Normal Background Image, not Auto Moving Background Image; the two are mutually exclusive per the block’s own documented note.
- The full-width hero section using the background image will not span the full page width: matches a reported case (ticket #10521) on an Elementor + Nexter combination; check the container’s Content Width setting rather than the Ken Burns toggle itself.
- Hover interactions on the image (tilt or move) stop working once Ken Burns is on: this is expected: the block’s own guidance is that Special Image Hover Effects do not run together with the Ken Burns effect, so pick one or the other for a given background image.
