Image Swap on Hoverstate

Site URL: https://www.mc3.com/

I'm trying to achieve the same image swap as this site on my website's team page.

Our team page is currently built with 1x4 image content blocks. Using the same process and code as this tutorial, I was able to mess around enough to create this.

When I'm logged in, it works and looks as intended - see here.
But when not logged in, they lose their padding and the 2nd image shrinks, regardless of both being sized at 300x200. See here, live.

Two questions:
- Any work arounds for this padding and shrinkage (insert Seinfeld quote) issue?
- Is there a better way, in general, to do this for 50+ employee images? (100+ respectively)

Do you still need help on this?

I used to code for a client.
Our solution adds a Gallery to the bottom of the page (it's visible only in editing mode, not visible to visitors).
Then use JavaScript to connect team members with photos in Gallery in the correct order. When you add a new member, just add a photo to Gallery. The Hover image will work.