CooksBay

Yes please bring this feature back, especially for agencies. We don't know who made any of the changes.

Thank you! This worked for me as well! I just changed the background color in the code from black to the hex code  😀

I'm having this exact same issue. 

Did anyone figure this out?

I'm stunned that we've been asking for this for YEARS and there has still not been an update/announcement on SS's plan for new gen images. I have created around 20 websites on Squarespace for clients and I think I'm going to have to migrate to something else soon. Speed test on my latest website attached - it's ridiculous.

Also, you can't link to a project inside a portfolio when trying to link to a "Page." I had to grab the actual full URL and do a web link. 

Please add this feature, I'm about ready to never use a portfolio page again. Unfortunately, I created a client's website using portfolio pages and now it would be so much work to redo. 

Is this on the product/feature roadmap yet? We really need it! I have a map on a client's website that you need to be able to zoom in on otherwise it's worthless. 

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

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>

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