Rollover images not the same size outside of the editor

Site URL: https://pineapple-sapphire-khkb.squarespace.com/

I'm having a rollover issue. I found some CSS to go from a black icon to one with color on hover, and it works perfectly within Squarespace. But when I view it in a separate browser window or different browser, the original icons aren't the same size as the hover versions. The attached images are what it's supposed to look like and what it actually looks like outside of the editor.

Here is the CSS I'm using:

.icon-swap-linkedin img:nth-child(1) {
  position:absolute;
  transition: .5s;
}
.icon-swap-linkedin img:nth-child(1):hover {
  opacity:0;
}
.icon-swap-twitter img:nth-child(1) {
  position:absolute;
  transition: .5s;
}
.icon-swap-twitter img:nth-child(1):hover {
  opacity:0;
}
.icon-swap-instagram img:nth-child(1) {
  position:absolute;
  transition: .5s;
}
.icon-swap-instagram img:nth-child(1):hover {
  opacity:0;
}

password is guava

Hey @KaijuCorgi you don't need to use 2 different images. You could use SVG icons and then target the fill on hover to change the color. 

Ooh, I didn't know that! It sounds like a much better way to handle it. I'll give it a shot. Thanks @RyanDejaegher!

@KaijuCorgi no worries, if you get the SVG icons on the site and are still having trouble let me know and I can give you a hand

@RyanDejaegherI did get it to work on the first icon, but there are a couple snags. As you roll over the empty space in the icon (the "in"), the color effect goes off, causing a jittering effect if you move your mouse all the way across. Also, transition is being ignored outside the editor (I can't remember if this was working outside the editor before or not). 

I tried a version with a background fill color for the "in" instead of no fill, but that didn't seem to change anything. Looking at the svg code all I see is the dark fill. 

I'm learning the required css (and vector requirements) from scratch so this could def be user error. 

@KaijuCorgi looks like you were adding the hover on the path, so when you hover over the letters it breaks the effect, if you add the hover on the svg it will work.

Try adding this to your custom CSS

 

svg {
    fill: black;
}

svg:hover  {
    fill: red;
}

Result:

 

Wow, I feel like I'm really missing something. I copy + pasted your css in, removed my additions to the svg code, and now it's not doing anything on hover. Clearly it should work 😕  I hugely appreciate all your help and this method is so slick. Could I do it the original way and set the image sizes, or will Squarespace override that? 

Edit: Did some google digging and found this thread: https://github.com/filamentgroup/grunticon/issues/235 "TL;DR: Also make sure there are no fill="xxxx" attribute in your svg markup"

So I deleted that from my svg code and it worked! WHEW. I'll put in proper colors and see if I can get it working for the other two icons.