Jump to content

Image Swap on Hover in Fluid Engine

Recommended Posts

Site URL: https://onion-teal-fz29.squarespace.com/

Hello, I'm trying to create a hover on the images on this page that swap to a different image when hovering. I uploaded two images in custom files, put them in a code block and tried the Custom CSS from a youtube video but it's not working. The images are showing but are stacked on top of eachother. 

I also need these images to link to different pages on the website. Please help!

 

https://onion-teal-fz29.squarespace.com/wine 

 

https://onion-teal-fz29.squarespace.com/

Password: wine

Link to comment
  • Replies 4
  • Views 757
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Hmm,

I think the easiest way to achieve this is insert the three images and position them where you want them. Take the 3 images you want to display on hover and add them as the background of a pseudo-element.

When someone hovers lower the opacity of the original image and raise the opacity of the pseudo-element. You can then add the link to the original element and use that to direct people to where you want them to do on click.

Without seeing all three images or being able to replicate the problem, I can't give you a solid code to try.

 

Best,

Dan

Link to comment
27 minutes ago, Wolfsilon said:

Hmm,

I think the easiest way to achieve this is insert the three images and position them where you want them. Take the 3 images you want to display on hover and add them as the background of a pseudo-element.

When someone hovers lower the opacity of the original image and raise the opacity of the pseudo-element. You can then add the link to the original element and use that to direct people to where you want them to do on click.

Without seeing all three images or being able to replicate the problem, I can't give you a solid code to try.

 

Best,

Dan

Hi Dan, thanks for your help. Here's the code:

For the code block on the page, this is what I used which includes the URLS of the two images.

<div class="image-swap"> <img src="https://static1.squarespace.com/static/62f3cffc493e186006918632/t/630f7d2baf5afb34fc1f668c/1661959471742/cabernet-sauvignon-everly-farms-winery-minnesota-wines-mn-web.png">

  <img src="https://static1.squarespace.com/static/62f3cffc493e186006918632/t/630f7d465b47932cc38280d3/1661959496503/cabernet-sauvignon-what-are-the-best-wineries-in-mn-b%26w.png">

</div>

 

Then is the Custom CSS part I put this code:

<a href=https://everlyfarmswinery.com/cabernet-sauvignon>

.imape-swap img:nth-child(1) {position:absolute;

transition: 1s;

}

 

.imape-swap img:nth-child(1):hover {opacity:0;}

</a>

Link to comment
<div class="image-swap" id="swap-one">
  <a href="https://example.com">
    <img class="top" src="https://static1.squarespace.com/static/62f3cffc493e186006918632/t/630f7d2baf5afb34fc1f668c/1661959471742/cabernet-sauvignon-everly-farms-winery-minnesota-wines-mn-web.png">
    <img class="hovered" src="https://static1.squarespace.com/static/62f3cffc493e186006918632/t/630f7d465b47932cc38280d3/1661959496503/cabernet-sauvignon-what-are-the-best-wineries-in-mn-b%26w.png">
  </a>
</div>

Here's what I came up with as a solution for your code block.

Below is the CSS. I put an ID in the code above just in case you needed to do some extra targeting for the other images. Here's a link to the code too, if I understood what you wanted to do. https://codepen.io/wolfsilon/pen/vYjBeBY/bcfb77d250bc68ece9eb4e19f4b56039

.image-swap {
  opacity: 1;
  max-width: 400px; /* adjust widths */
  height: auto; /* adjust height */
  position: relative;
}
.image-swap img {
  width: 100%;
  transition: all 0.3s ease;
}
.hovered {
  opacity: 0;
  position: absolute;
  left: 0;
}
.image-swap:hover .hovered {
  opacity: 1;
}

 

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.