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.
Opens WPIDE on
Code
.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 add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.