Image swap on hover.

Site URL: https://rectangle-rhombus-8f5s.squarespace.com/hop-varieties

Hello, I am trying to have an image rollover swap and have used this code from an online tutorial, but it doesn't seem to line up (look at link in incognito mode if you aren't seeing the overlap). 

Here is the custom CSS I am using:

/*image swap*/
.image-swap img:nth-child(1){position:absolute; transition:1s;}
.image-swap img:nth-child(1):hover{opacity:0;}
 /*end image swap*/

then I am using inline code on the page as so:

<div class="image-swap">
  <img src="https://static1.squarespace.com/static/6064ac7b6aa1f0353a050a95/t/62825f8dfcc256051b01506c/1652711309494/Hop_variety_cascade_A.png
">
  <img src="https://static1.squarespace.com/static/6064ac7b6aa1f0353a050a95/t/62825f9f70b48c1c01eace02/1652711327416/Hop_variety_cascade_B.png">
</div>

It might help if we could see the tutorial.

From what I can see on the page by making one of the images position : absolute it has taken that image out of the normal flow of rendering and allowed it's dimensions to be different from the other image.

Quote

 

Can i change both to position:absolute?   This is the tutorial I used. 

Quote

Can i change both to position:absolute?

That was one of the first things I tried but then the buttons etc all move to the top of the column because all the images are out of the flow.

I tried your code on my v7.1 test site and in SS Preview (the editor) it worked a treat. When I viewed the site as a visitor would, the effect broke.

Try the following for your CSS.

/*image swap*/
.image-swap { position: relative; }
.image-swap img:nth-child(1){position:absolute; transition:1s;}
.image-swap img:nth-child(1):hover{opacity:0;}
.image-swap { position: relative; }
 /*end image swap*/

There is a new rule-set at the top.

Let us know how it goes.

That seems to be working beautifully.  Thank you!

one last question.

I am seeing the swap image behind the first image.  Is there away to prevent this?  Maybe just not make it a transparent gif?

https://rectangle-rhombus-8f5s.squarespace.com/hop-varieties

Yeah because the images are not perfectly the same shape you are seeing two images at one. The solution is too manipulate the state of both images. Something like the following.

.image-swap {

  position : relative;
  
  }

.image-swap img:nth-child( 1 ) {

  position : absolute;
  transition : 1s;
  
  }

.image-swap:hover img:nth-child( 1 ) {

  opacity : 0;
  
  }

.image-swap img:nth-child( 2 ) {

  opacity : 0;
  transition : 1s;
  
  }

.image-swap:hover img:nth-child( 2 ) {

  opacity : 1;
  
  }

Let us know how it goes.