Change Image on Hover in Squarespace

In this video, I show you how to use CSS to change the image when a user hovers overtop.

🔗 CONNECT WITH ME:

😍 MY FAVOURITE TOOLS:
The following are affiliate links. While I receive a small commission I support these products because I use them in my own business.

📚 CHAPTERS:
00:00 Introduction
00:00 Add the Images
00:00 Add the Code
00:00 Conclusion & What's Next

#squarespace #squarespaceCSS #squarespacehelp

[kelpx]

This video should have thousands of likes and views!!! Brilliant! Thank you!

[RichardEyers]

Absolutely brilliant! If only every YouTube tutorial was as easy to follow.

[askcoachlara]

OMG I am NOT code savvy at all and this worked! You're amazing THANK

[Harrissarena]

Sheesh Rebecca just made me a coder! I’m so happy

[chadpoorman]

@RebeccaGraceDesigns thanks so much for this tut. it works perfectly on desktop and mobile for me. have you figured out a way, or do you have a tutorial for doing this same exercise on project tiles inside of a portfolio collection? thanks again!

[PressureGrafix]

Amazing tutorial but squarespace doesn't have that option for me to duplicate an image block. Does this only work on certain templates?

[datokraveishvili]

hey! thanks for the tutorial, i have an ongoing ecommerce website project where client wants this effect on every product, what should i do then? is there any way to apply this eefect on every product photo?

[AlastairColeUplift]

Love this Rebecca! Thanks for making this video - super helpful. In particular great copy-and-paste with the CSS via yr website

[RedPoppyArtHouse]

This is great, Rebecca, thanks! Do you happen to know or for-hire to learn how to replace image on a Gallery Grid? Thx!

[OrganicAlchemist]

Thank you so much for this very easy and thorough tutorial! Very helpful!☺

[AmySeagraves]

Thank you sooo much, this is fab! Is there a way I can use it on 3 images on the same page? Thank you in advance! Amy

[cadiastouch]

This really helps, can I ask if the transition could be change from fade in and fade out to others

[BeaterBlade]

Rebecca, this is great, however, on the Mobile experience, the hover is just white until you touch the space...then the picture reveals. Customers might not understand to touch the blank space. Is there a workaround so the image alway reveals on Mobile? Thanks

[lindsayobrien]

Thank you for this excellent video! However, I can only get the code to work as intended when I have my website in EDIT mode. I used your directions exactly as you described. If you have any idea on why I can't do this on the live version, I would love to have your insight.

[NadiaEngenheiro]

I don't have the design option on my side tab, do you know how to do this if that isn't an option?

[gustavosmusic]

Hi Rebecca, thank you for the video, it works great. My "reveal" image is a GIF that doesn't loop, so my idea is that every time you hover over it, the animated GIF plays out and ends frozen on the last frame. I got the Gif wrking, but it doesn't restart every time I hover over. I have to refresh the whole page. Not a major deal breaker, but do you have any idea if this can be implemented somehow? Refreshing the Gif every time we hover off the image so the animation replays once we go over again. Thanks a lot!

[karenvinalay]

Hello Rebecca! Lovely update. May I know how to add a link to the photo? I want to link it to another page on the website. The setting doesn't work :(

[staceybriggs]

Can I still do this with an "Impact" template? I don't seem to have the "fit", "fill" or "duplicate" options for my images...? Thank you!

[thesustainabilityenthusiast]

Hi! Desktop worked but then on mobile for me it shows both images. However I can't "hide" the image, just see an option to delete the hover image on mobile - but once I delete the hover image on mobile, it no longer shows on desktop. Do you know what the issue / fix might be here?

[TRIUMVIRATEMEDIA]

Hello Rebecca, I need some help. how do you do this multiple times on a page I have tried redoing the code under the first and I've tried adding multiple block ids on one code; neither worked. thank you so much.