Hover zoom-in CSS



I am trying to get a zoom-in effect on hover for my images inside a gallery.

However, the center image is always showing a weird scaling or margin issue that I cannot get rid of.

The issue is more visible in the middle image inside my 3-columns-galleries.

The issue is more or less visible depending on the width of the browser window.


Attached is a small GIF showing the issue.


The margin is not respected and behaving weirdly


This is the example page from my website :



Here is my current CSS code :

`.wp-block-gallery .wp-block-image {`

`overflow: hidden;`


`.wp-block-gallery .wp-block-image img {`

`transform: scale(1);`

`transition: .3s ease-in-out;`


`.wp-block-gallery .wp-block-image:hover img {`

`transform: scale(1.03);`



I have tweaked the CSS without success and I cannot understand why only the middle image is behaving like this.

FYI my images have a .5px margin.


Thank you for you support !

Have a nice day 🙂


This site will teach you how to build a WordPress website for beginners. We will cover everything from installing WordPress to adding pages, posts, and images to your site. You will learn how to customize your site with themes and plugins, as well as how to market your site online.

Buy WordPress Transfer