How to Add Zoom Effect to Image Background on Elementor Container (Custom CSS)

#css #webdev #wordpress

The Method
The Code Implementation
Implementing the Code in Elementor
Prebuilt Templates

Elementor allows you to set an image as a background of a container. Be it on the normal state or on a hover state.

However, after digging deeper, there is one super annoying thing: you can't set an animation effect on hover state. Even as simple as a zoom effect. This makes your design look soulless.

Well, there is a built-in setting option on the editor to set the transition duration but it doesn't work on image background.

I found a method that completely works in case you want to add a little animation to the image background on a container, via custom CSS.

The Method

As I said, Elementor has a built-in setting option to add an image background on both the normal state and hover state but the option to add a hover effect is missing.

Of course, you can use custom CSS to apply the zoom effect on a container manually. But if you directly target the container for the zoom effect, the entire content inside the container will be zoomed too.

That's because in CSS, when you zoom (scale) a container, all elements inside it will be automatically scaled too.

Instead of directly targeting the container, you can use a pseudo element to hold the background image. This will allow you to add an animation effect (including zoom) to the background independently on a separate layer without affecting the content inside the container.

The Implementation

Here is the code of the implementation of the above method.

.zoom-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('background URL');
    background-size: cover;
    background-position: center;
    transition: transform 0.5s ease;
    z-index: -1;
}

.zoom-container:hover::before {
    transform: scale(1.1);
}

Implementing the Code in Elementor

Before you implement the code on your Elementor design, you need to disable the overflow on the container you want to implement the code to.

To do so, you can go to the Layout tab on the settings panel and open the Additional Options settings block. Set Overlay to Hidden.

Next, if you are on the Pro version, you can open the Custom CSS block under the Advanced tab and paste the code to the editor.

Don't forget to replace the image URL with your own image URL that you want to use as the background.

After adding the code, you need to add the CSS class to the container. Simply paste the CSS class zoom-container to the CSS Classes field on the Layout settings block.