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


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


Then at the page level I have added this CSS code

.thisGroup {
 transition: 0.3s;

.thisGroup:hover {
 transform: scale(1.2);

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?

1 Like

Thanks a lot, this is it!

1 Like

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