Zoom effect on background image

The container classes need to be like this:

Then, CSS needs to be like 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;
}

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

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

But, remember to put the URL of the images here!

.hover-scale-bg.image-2::before {
	background-image: url('https://library.generateblocks.com/wp-content/uploads/2020/07/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');
}

The names I have chosen there are random: another-image.jpg and yet-another-image.jpg. You need to replace those with real image URLs!

Great, you are welcome.