How to create a background image zoom on hover in Elementor

Adding a background image zoom on hover is a simple way to make sections feel more interactive without overwhelming the design. When done properly, it creates subtle movement that draws attention while keeping the layout clean and professional.

This guide walks you through the correct way to create a smooth background image zoom on hover using Elementor containers, explains common mistakes, and shows how to keep the effect performant and responsive.

Why use a background image zoom on hover?

A background image zoom works best when you want visual effects without changing layout structure. Instead of scaling the entire container or adding animations to widgets, you animate the background image itself.

This is commonly used for:

• Card-style layouts
• Feature blocks
• Service sections
• Image-based call-to-actions
• Portfolio or case study previews

The key is subtlety. Overdoing the zoom makes the effect distracting and cheap. A small, smooth scale feels intentional and polished.

The main problem that everybody faces when trying to implement this effect

Most people will use Cover for background images, and for most use cases in websites, this is the best way to set display sizing for a background image. However, you’ll find that the display size ‘cover’ does not work with the hover setting ‘transition duration’. Using cover just makes the hover animation very jumpy, and unappealing which leaves many users frustrated.

But I have a solution for you.

Step-by-step: background image zoom on hover in Elementor

1. Select your container
   Make sure you are using a container, not a legacy section.
2. Set the background image
   Go to Style → Background
   Choose your image
   Set Background Display Size to Custom (very important) and set to a value that covers the container you are using (e.g 120%)
   Set Background Position to Center Center
   Set Background Repeat to No-repeat
3. Enable hover state
   In the Background control, click the hover tab
   Set the hover custom display size value to something slightly larger, such as 200%. Or however you want depending on the look you are going for.
4. Add a smooth transition
   Go down to Transition Duration and select a value.

Using the same display size values across devices: Remember to adjust for tablet devices as your background container is different size here.

Common mistakes to avoid

Zooming too much
The goal is movement, not distraction.

Forgetting mobile behavior
Hover effects don’t exist on touch devices. Make sure the design still looks correct without interaction i.e use the same value on mobile normal state and hover.

Stacking multiple animations
Avoid combining background zoom with fade, slide, or transform effects on the same container. This will get messy very quickly.

Performance considerations

Background zoom on hover is lightweight when done correctly. Because you’re not triggering layout recalculations or JavaScript, the effect is GPU-friendly and performs well even on larger pages.

To keep things fast:

• Use properly sized images
• Avoid oversized background assets
• Don’t apply the effect to dozens of containers on the same page

And remember, hover effects should support the content, not compete with it.