Image size issue with hover css (code block)

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

I am having a mind numbing issue with some simple css. I have a code block with image image swap. It looks great in editor mode but on the live site the first image is expanding outside of the appropriate image block. The roll over image is correct however. Not really sure what the issue is. Any ideas?

www.kevinfabrizi.com

Here is my CSS

.image-swap img:nth-child(1) {
  position: absolute;
  transition: 0s;
}

.image-swap img:nth-child(1):hover {
  position: absolute;
  opacity: 0;
}

Hi. It looks like you solved the problem?

I was having the exact same issue! How did you solve it @fabrizi?

On 8/16/2020 at 10:08 AM, KaijuCorgi said:

I was having the exact same issue! How did you solve it @fabrizi?

If you share link to page where you use code block. We can take a look

@tuanphanI ended up switching back to standard Squarespace social icons, but here's my original thread on the issue: 

Hi all, was there a solution to this? I am also having this exact same issue here --> https://www.thisishustle.com/our-community 

It all looks fine in editor mode though. 

15 hours ago, katelouisemoras said:

Hi all, was there a solution to this? I am also having this exact same issue here --> https://www.thisishustle.com/our-community 

It all looks fine in editor mode though. 

I found a solution on the original tutorial I followed. In case anyone has the same problem here is a link - solution in comments. It has to do with padding vs margin. 

How does the image swap work on a main page where you can't add the code section? 
 

17 hours ago, sarahjohanna said:

How does the image swap work on a main page where you can't add the code section? 
 

Can you share link to main page? WE can check easier.

1 hour ago, tuanphan said:

Can you share link to main page? WE can check easier.

www.sarahkoester.com

On 8/20/2020 at 7:12 PM, sarahjohanna said:

www.sarahkoester.com

Have you found this yet?