Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

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


Jnap

Question

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

Link to comment

3 answers to this question

Recommended Posts

  • 2

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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...