How do you make image swap in a code block remain the same size?

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

Hi,

Do you still need help?

Try the following for the basic swap effect.

/* begin image swap */

  .image-swap {
  
    position : relative;
    
    }
    
  .image-swap img:last-child {
  
    left : 0;
    opacity : 0;
    position : absolute;
    top : 0;
    transition-duration : 0.5s;
    
    }
    
  .image-swap:hover img:last-child {
  
    opacity : 1;
    transition-duration : 1s;
    
    }
    
  /* end image swap */

This is for a v7.1 site.

If all your image swaps are going to be the same then you could use just the one rule-set group. Just change all your code blocks to match the .image-swap selector.

Let us know how it goes.

Creedon,

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