Super Easy Elementor Ken Burns Effect Without Plugin

Super Easy Elementor Ken Burns Effect Without Plugin

Table of Contents

In this tutorial, I'm going to show you how you can super easily add an Elementor Ken Burns to a background image without any extra plugins.

It works with both containers and sections.

See the demo here:

Click here if you are interested in those Elementor expand and collapse content toggles.

First, within the Elementor editor, add your image as background overlay

That's the image that will have the Elementor Ken Burns Effect.

It's important to add it as a background overlay. If you don't want it at full opacity, you will be able to adjust the opacity setting.

Super Easy Elementor Ken Burns Effect Without Plugin 1

Then to change the coloring while the opacity is < 1, you can simply add a background color, in the proper background tab (as opposed to the background overlay tab).

Super Easy Elementor Ken Burns Effect Without Plugin 2

This gives a very similar result to background image + plain color overlay.

Then, give your section or container with that background overlay a class name

Give it the class name "ken_b_center".

Super Easy Elementor Ken Burns Effect Without Plugin 3

You also need to set it to overflow:hidden; (true whether you are using a section or container).

Super Easy Elementor Ken Burns Effect Without Plugin 4

Finally, add this CSS to your project

Add the CSS globally, unless you plan to use this on a single section or container. That can be in your customizer, or in your child theme's styles.css.

If you are using containers, add this CSS:

.ken_b_center::before {
animation: zoom_in 30s alternate linear infinite;
will-change: transform;
}

@keyframes zoom_in {
0% {
transform:scale(1);
}
100% {
transform:scale(1.2);
}
}

If you are using sections, add this CSS:

.ken_b_center .elementor-background-overlay {
animation: zoom_in 30s alternate linear infinite;
will-change: transform;
}

@keyframes zoom_in {
0% {
transform:scale(1);
}
100% {
transform:scale(1.2);
}
}

With the CSS in place, the only thing needed now to add this to more sections or containers, is to give them the "ken_b_center" class name!

You can adjust the "30s" value, to make the animation quicker or slower.

That's all! Enjoy your free Elementor Ken Burns Effect!

Hope you enjoyed!

Looking for something else? Search across 2369 Elements right here:

And get exclusive Elementor related discounts here

Checkout the Elementor Addon Finder directly

Comments

Leave a Reply