# Slow Zoom (Ken Burns) Effect for Cover Images

> Adds a slow, cinematic zoom to the background image of any Cover block with the class "wpide-ken-burns", for more lively hero sections without video.

- Type: CSS
- Runs: Site-wide header
- Category: [Frontend & Design](https://wpide.com/library/category/frontend/)
- Tags: cover, animation, hero, images
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/frontend-ken-burns-cover/

## Code

```css
.wp-block-cover.wpide-ken-burns {
    overflow: hidden;
}

@media (prefers-reduced-motion: no-preference) {
    .wp-block-cover.wpide-ken-burns .wp-block-cover__image-background {
        animation: wpide-ken-burns 24s ease-in-out infinite alternate;
        transform-origin: 60% 40%;
    }
}

@keyframes wpide-ken-burns {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.12);
    }
}
```

## Notes

Add wpide-ken-burns to the Cover block's Additional CSS class(es). Off for visitors who prefer reduced motion.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Slow Zoom (Ken Burns) Effect for Cover Images" in its snippet library and add it in one click; or create a new CSS snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/