Image Swap on Hover in Fluid Engine

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

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

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>

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

This WORKED!!!  I can't thank you enough!!!