Hello,
​
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.
[https://ibb.co/d0mZMCt](https://ibb.co/d0mZMCt)The margin is not respected and behaving weirdly
​
This is the example page from my website :
[https://bastienchilloux.com/courage/](https://bastienchilloux.com/courage/?fbclid=IwAR3AkpMzzePEmVFG0iLAo00PYIkqV5HdkSor51f4BomuOzLTn6pHe1G1MOg)​
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 🙂