/ all snippets

Add Zoom Effect to Container Background Image

This CSS snippet adds a zoom effect to container background image. To use it, add the `zoom-container` class to your container and replace the image URL. To make the code work properly, disable (hide) overflow of the container.

If you don't have Elementor Pro, you can replace the prefix of "selector" with a CSS class you can define yourself. To add the CSS snippet, you can use the HTML widget.

Download Elementor Pro

.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);
}