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;
}