Jnap

Creedon, I guess I somehow didn't see your post! That worked great, thank you very much.

Site URL: https://www.originexpeditions.org/caltopo-guide Scroll down to "A Tour of CalTopo's Interface." For some reason, whenever it does the image swap it changes the size of the picture. The two images injected in the code are the exact same size so I have no idea why this is happening, it should look like a smooth transition. It does this for every image swap on the page. Here is my CSS: .image-swap img:nth-child(1) { position: absolute; transition: .5s;} .image-swap img:nth-child(1):hover { opacity:0; } .image-swap2 img:nth-child(1) { position: absolute; transition: 1s; } .image-swap2 img:nth-child(1):hover { opacity:0; } .image-swap3 img:nth-child(1) { position: absolute; transition: 1s; } .image-swap3 img:nth-child(1):hover { opacity:0; } .image-swap4 img:nth-child(1) { position: absolute; transition: 1s; } .image-swap4 img:nth-child(1):hover { opacity:0; } .image-swap5 img:nth-child(1) { position: absolute; transition: 1s; } .image-swap5 img:nth-child(1):hover { opacity:0; } .image-swap6 img:nth-child(1) { position: absolute; transition: 1s; } .image-swap6 img:nth-child(1):hover { opacity:0; }