How to have a background image zoom in/out with CSS?

Need help
1

Hi,

I am trying to do that in full CSS, I have a group with an image background.

I want the image to zoom in by 20% when the group is hovered (without going outside of the group borders).

So far I have installed the plugin “Classify” and gave my group a classID

{addClass:"thisGroup"}

Then at the page level I have added this CSS code

<style>
.thisGroup {
 transition: 0.3s;
}

.thisGroup:hover {
 transform: scale(1.2);
}
</style>

The entire group gets 20% bigger, not only the image.

I also have tried to do it the other way around : having an image inside a group and my CSS class attached to the image. But then the image overlaps the group.

Any help please?
Best

2
1 Like
3

Thanks a lot, this is it!

1 Like
4

This topic was automatically closed after 70 days. New replies are no longer allowed.