Jump to content

CooksBay

Circle Member
  • Posts

    14
  • Joined

  • Last visited

Posts posted by CooksBay

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

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

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