--- title: "How to Add Ken Burn Effect to a Container in WordPress?" url: https://nexterwp.com/docs/add-ken-burn-effect-to-a-container-in-wordpress/ date: 2024-11-28 modified: 2026-09-19 lang: en author: "Aditya Sharma" description: "A still hero image is inert. A very slow zoom across it gives the section a sense of life without asking the visitor to watch anything. The Ken Burns effect..." image: https://nexterwp.com/wp-content/uploads/2024/11/How-to-Add-Ken-Burn-Effect-to-a-Container-in-WordPress_-1024x519.jpg word_count: 509 --- # How to Add Ken Burn Effect to a Container in WordPress? ## Key Takeaways - Nexter Blocks Pro activa el efecto Ken Burns en un Container con fondo de imagen, y la opción sola no hace nada sin elegir primero el tipo de fondo. - El efecto se comporta como una animación CSS continua en la capa de fondo, con dirección de zoom in o zoom out y duración ajustable; veinte segundos y más se leen como intencionales. - La imagen se escala al hacer zoom, por lo que una fuente más grande evita desenfoque y el sujeto debe quedar lejos de los bordes porque el recorte aumenta. A still hero image is inert. A very slow zoom across it gives the section a sense of life without asking the visitor to watch anything. The Ken Burns effect does exactly that — named after the documentary technique of drifting slowly across a photograph. [LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-container/) ## Before You Start - **Edition:** **Pro** — the Ken Burns effect needs Nexter Blocks Pro.- **Block to enable:** Container, switched on under **Nexter > Blocks** in your WordPress dashboard.- A **Container** block with an image background — see the [Container block guide](https://nexterwp.com/docs/add-a-container-in-wordpress/).- An image with room to spare, since the effect zooms into it. ## Steps - Select your **Container** and set its background type to **image**. - Choose your background image. - Switch the **Ken Burns** effect on. - Choose the **direction** — zooming in or out. - Set the **duration**. Slower is better; this should be barely noticeable. - Publish and watch the real page. ## How It Behaves The effect is a CSS animation applied to the background layer, so it runs continuously on its own. - **The background option comes first.** Measured: the individual effect settings do nothing on their own — the container only renders an effect once the background type that owns it is chosen. Measured: the Ken Burns toggle on its own, with no background type chosen, rendered the bare container.- **With an image background set, measured:** the container rendered an inline `animation: bg-kenburns-effect …` rule on its background layer, carrying the duration and direction as set.- **It loops forever.** There is no start or end — the animation repeats for as long as the section is on screen.- **The image is scaled up to zoom**, so a small image will soften noticeably. Use one larger than the space it fills.- **Measured with Nexter Blocks Pro deactivated:** this effect disappears completely and the container renders as a plain section, with nothing on the page to say why. ## Limitations - **Pro only** — measured with Nexter Blocks Pro deactivated, no animation is rendered and the background sits still.- **Fast is wrong.** A short duration turns a subtle drift into a distraction; twenty seconds and upwards reads as intentional.- **Edges get cropped as it zooms**, so keep the subject away from them.- **It runs the whole time the section is visible**, which is constant work for the browser — one such section per page is sensible.- **Consider motion sensitivity.** Continuous movement behind text is uncomfortable for some readers. ## Troubleshooting ### Nothing happens Check an image background is set first — measured, the effect toggle alone renders nothing. Then check Nexter Blocks Pro is active. ### The image looks blurry It is being scaled up. Use a larger source image so it stays sharp at full zoom. ### The movement is too obvious Increase the duration. A background effect that draws attention to itself is working against the content. ### Part of my image is cut off That is how the zoom works. Choose an image whose subject sits well inside the frame. ## Related Docs - [Add a container in WordPress](https://nexterwp.com/docs/add-a-container-in-wordpress/)- [Add parallax effect to a container in WordPress](https://nexterwp.com/docs/add-parallax-effect-to-a-container-in-wordpress/)- [Add an image rotating background to a container](https://nexterwp.com/docs/add-image-rotating-background-to-a-wordpress-container/)- [Add a video background in a WordPress container](https://nexterwp.com/docs/add-a-video-background-in-a-wordpress-container/)- [Advanced tab settings](https://nexterwp.com/docs/use-advanced-tab-in-nexter-blocks/) ## Frequently Asked Questions **Q: What do I need before adding a Ken Burns effect to a WordPress container?** A: The effect depends on three things: Nexter Blocks Pro, the Container block being enabled under Nexter > Blocks, and a Container block with an image background. It also works best when the image has room to spare, because the animation zooms into the background and crops edges as it moves. If the source image is too tight, the subject can get cut off fast. **Q: Why does nothing happen when I turn on the Ken Burns effect?** A: The background type has to be set to image first. The effect toggle alone renders nothing, because the animation only attaches to the background layer that owns it. Nexter Blocks Pro also has to be active. In practice, this is the most common miss: people switch on the effect before choosing an image background, so the container stays plain. **Q: How slow should the Ken Burns animation be for a hero section?** A: Slower is better here. The page calls out twenty seconds and upwards as intentional, while short durations make the drift feel distracting instead of subtle. That matters because this effect is meant to add life without pulling attention away from the content. If it starts looking obvious, increase the duration until it feels like motion in the background, not an animation people notice. **Q: Why does part of my image get cut off with a Ken Burns background?** A: That cropping is built into how the zoom works. The image scales up during the animation, so edges get trimmed as it moves. The practical fix is to choose an image whose subject sits well inside the frame and leaves extra space around it. This matters most for portraits, logos, or any composition where edge detail is important. **Q: Why does my Ken Burns background look blurry?** A: The image is being scaled up during the zoom, so a small source file will soften noticeably. A larger source image stays sharper at full zoom because there is more detail available when Nexter Blocks applies the animation. For hero sections, that usually means starting with an image that already has more resolution than the space it fills. **Q: Is Ken Burns a good choice for a WordPress hero section with text on top?** A: It works well when you want motion that stays in the background and does not demand attention. The page notes that continuous movement behind text can be uncomfortable for some readers, so one such section per page is sensible. Nexter Blocks Pro applies it as a CSS animation on the background layer, which means it loops forever while visible and should stay subtle.