Add Ken Burns Zoom and Slide Effects to Elementor Containers

Add Ken Burns Zoom and Slide Effects to Elementor Containers
Example 1:
/* Ensure kenimage is the class of the Elementor section */
.kenimage { position: relative;
overflow: hidden; /* Ensure the overlay doesn't overflow the container */
animation: zoomMove 5s ease infinite alternate;}
@keyframes zoomMove {
0% {
background-size: 100%;}
100% {
background-size: 120%; }}
Example 2:
/* Ensure ken2 is the class of the Elementor section */
.ken2 {
position: relative;
overflow: hidden; /* Ensure the overlay doesn't overflow the container */
animation: slideMove 40s ease infinite alternate;
}
@keyframes slideMove {
0% {
background-position: left center;
}
100% {
background-position: right center;
}
}
Example 3 Loop Grid:
.ken3 {
position: relative;
overflow: hidden;
animation: slideMove 10s ease infinite alternate;
}
@keyframes slideMove {
0% {
background-position: left center;
}
100% {
background-position: right center;
}
}
👉 Grab our $1 Business Packs: learn.websquad...
👉 WordPress Hosting: be.elementor.c...
👉 The Pro Page Builder: be.elementor.c...
Need 1-2-1 Support: learn.websquad...
Join our Facebook Group: / websquadron
Get Code Snippets Pro: r.freemius.com...

[@aequitas7483]

Creativity. I like it!

[@media-deep]

thank you!

[@aminvalipoor2061]

nice

[@patsymutiso]

Yes this would be a great on a hero Banner!!! I wonder if this would be nice as a hover affect 🤔

[@websquadron]

For that - I would just use the CTA widget.

[@emmanuelivwighre5399]

Great video. Won't it have impact on the speed of the website?

[@cafelutsa_]

you might have some issues if you're running on a computer from 2001

[@websquadron]

Not really as I tested with 8 posts in a loop grid.