Topic: Zoom effect on background image

Luca Cogo
January 9, 2026 at 2:12 am

Hello,
I am trying to create a zoom effect on an image or background image, with the effect remaining within the dimensions and border of the container. I would like the zoom to only affect the image without enlarging the entire container.
Something like on at the bottom of your theme “Wilder” home page.
How can I do this?
Thanks a lot!
George
January 9, 2026 at 3:35 am

Hi Luca. This would work easier with an image.

1. Set the image’s parent container to OVERFLOW-X and OVERFLOW-Y to hidden from the Position settings on the right.

2. Select the image and add a TRANSITION from the Effects panel.

3. With the image selected, select the Hover selector and add a Transform effect with a TRANSFORM TYPE of Scale and a SCALE value of 1.1 from the Effects panel.

Let me know how it goes!
Luca Cogo
January 9, 2026 at 7:14 am

Hi George, it works!
There is still one problem: the corners of the image border are rounded, but when hovering, they return to right angles. I added the border radius value to the hover section as well, but that didn’t solve the problem…
George
January 9, 2026 at 7:16 am

Hi again.

Please, remove the border radius from the image, also from the hover selector. Apply the border radius to the image container instead.
Luca Cogo
January 9, 2026 at 7:29 am

Perfect!
Thanks a lot
George
January 9, 2026 at 7:35 am

No problem!
Luca Cogo
January 9, 2026 at 8:09 am

@George Is it possible to create a hover effect with a background image?
George
January 9, 2026 at 8:23 am

Yes, but you need GenerateBlocks Pro for this, otherwise, it can be achieved with some custom CSS. Let me know your preference.
Luca Cogo
January 11, 2026 at 11:24 pm

Hi George,
if it’s not too hard (I’m not a professional website builder), let’s try with CSS 🙂
George
January 12, 2026 at 1:36 am
No problem, just follow my lead!

Create a container and set POSITION to Relative. Also, set OVERFLOW-X and OVERFLOW-Y to hidden.

Set some paddings or a fixed height.

Set a custom class to this container, eg: hover-scale-bg

Insert this CSS:
```
.hover-scale-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('your-image.jpg');
    background-size: cover;
    background-position: center;
    transition: transform 0.4s ease;
    z-index: -1;
}

.hover-scale-bg:hover::before {
    transform: scale(1.1);
}
```
Insert it either in the Customizer or inside you child theme.
https://docs.generatepress.com/article/adding-css/

Let me know how it goes!
Luca Cogo
January 12, 2026 at 1:52 am

I do, but it doesn’t work… I think I do all as you said, can you check in private link. It is at the page bottom 🙂

George

January 12, 2026 at 2:14 am

Please, do not upload a background image on the container, you need to remove that.

Then, in your CSS, you need to add the URL of your image:

.hover-scale-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('https://www.staging2.baitarondanino.it/wp-content/uploads/2021/11/Esterni-Gallery-6.jpg');
    background-size: cover;
    background-position: center;
    transition: transform 0.4s ease;
    z-index: -1;
}

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

As you can see the actual image is being added in CSS through a ::before pseudo-element.

Luca Cogo
January 12, 2026 at 2:34 am

Ah ok, thanks.
I thought I could achieve the effect with a different image for each container, but instead with this method I use a single image for all the different containers…

George

January 12, 2026 at 3:08 am

You can change the image URL in the CSS provided to have a different image, it doesn’t have to be the same. You could add another class next to the hover-scale-bg one, let’s say image-2 or image-3.

Then have this:

.hover-scale-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.4s ease;
    z-index: -1;
}

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

.hover-scale-bg.image-2::before {
    background-image: url('https://www.staging2.baitarondanino.it/wp-content/uploads/2021/11/another-image.jpg');
}

.hover-scale-bg.image-3::before {
    background-image: url('https://www.staging2.baitarondanino.it/wp-content/uploads/2021/11/yet-another-image.jpg');
}

Let me know if you want further explanation.

Luca Cogo
January 12, 2026 at 5:03 am

I try, only first code too, but doesn’t work…
I don’t understand where is the problem

George

January 12, 2026 at 5:16 am

Ok, please remove z-index: -1;

from this code:

.hover-scale-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.4s ease;
    z-index: -1;
}

Viewing 16 posts - 1 through 16 (of 21 total)

1 2 →

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

Zoom effect on background image