Automatic Zoom In / Zoom Out (Breathing / Ken Burns) Effect in Elementor Without Plugins – WordPress

The CSS required to do this is pinned πŸ“Œ to the top comment.

Get Elementor:

Hosting I love and recommend for most clients and for those on a budget:

πŸ§™ Wizards of Webcraft – A series where I’ll be reviewing your websites – Apply now!

Automatically zooming in and zooming out an image is a great way to make your website a little more dynamic and interesting. It can be very subtle, hardly noticeable, happening somewhere in the background, or very apparent and used to capture attention.

The best part is, you can use this breathing effect for any element, any widget, including headings, icons, buttons and even whole containers. Not only that, it’s very simple and you have full control over it. You can control how much it zooms in and out, how long it takes to do so and how the effect speeds up and slows down.

Even more, you can use this to simply zoom in (or out) something and have it stay zoomed in (or out). That’s called a Ken Burns effect, and it’s a great way for adding visual interest to your website.

It just takes a little bit of CSS. And since the effect is created entirely with CSS, you can use it anywhere, including other WordPress page builders.

#elementor #zoominzoomout #breathingeffect

Get in touch:


Don’t be shy! Let me know what you’d like to see next, ask me anything related to design or just simply say hi.

Please note that some of the above are affiliate links, which means I earn a commission if you make a purchase, at no additional cost to you. Thank you very much if you decide to use them!