Jump to content

Image swap on hover.

Recommended Posts

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>

 

Edited by sarahetts
clarification
Link to comment
  • Replies 7
  • Views 1.2k
  • Created
  • Last Reply

Top Posters In This Topic

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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

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...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.