Change Image on Hover in Squarespace

[@RebeccaGraceDesigns]

Get my FREE guide outlining the 41 most popular CSS properties and their value options. 👉 www.rebeccagracedesigns.com/popular-css-properties

[@kelpx7]

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

[@RichardEyers]

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

[@Harrissarena]

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

[@askcoachlara]

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

[@RebeccaGraceDesigns]

You're welcome!

[@AlastairColeUplift]

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

[@RebeccaGraceDesigns]

You're so welcome!

[@PressureGrafix]

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

[@OrganicAlchemist]

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

[@RebeccaGraceDesigns]

You're welcome!

[@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!

[@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?

[@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!

[@datokraveishvili7612]

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?

[@RebeccaGraceDesigns]

Not automatically. You would have to manually code each one.

[@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

[@Heisvic]

Squarespace sucks when it comes to two completely different designs on different devices (Desktop) - (Mobile). To get around this, I would download (SQUARE-KICKER) and embed it onto the website Via/CSS. What you can do with this extension(Square-Kicker), Have two different page sections on your website, but the difference is that you can choose a certain section to show specifically only for (Laptop) or (Desktop) which ever u choose. You can find that setting under "Visibility" after installing the extension, and get around a lot of problems you might've had before installing that extension. Hopefully this helps and shit.

[@cadiastouch6525]

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

[@RebeccaGraceDesigns]

This code specifically uses Opacity which gives the fade in and out animation. You would have to add other transitions to create other animations.

[@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

[@RebeccaGraceDesigns]

Yes, you can add a comma in between each block id.

[@kennyhunte4833]

Hi Rebecca!! Great tutorial!! I have found that when I follow you directions of adding a comma after each block ID, it disables the hover effect for the previous image. Am I doing something wrong?

[@lozza.lou.tattoo]

@@kennyhunte4833that’s exactly what’s happening to me too. I’m trying to play around with the timing but that doesn’t work either! Would love some more info on how to do this with multiple images

[@karenvinalay9116]

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 :(

[@RebeccaGraceDesigns]

This code should not effect your click through link. Make sure your link is on the top image that shows on hover.

[@tovermoran4360]

Thank you!

[@RebeccaGraceDesigns]

You're welcome!

[@lindsayobrien8110]

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.

[@RebeccaGraceDesigns]

Usually when this happens there is an error in your code somewhere. Try removing all of your code and then add it back in, in small bits to see what part of the code is causing the issue.

[@staceybriggs6797]

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!

[@RebeccaGraceDesigns]

Are you working in Squarespace 7.1? If so, then all the templates have the same options. They just start with different designs. If you are in Squarespace 7.0, then you won't be able to overlap your images like I do in this video.

[@eladarale]

Hello, nice video! but were is the CSS code please?

[@eladarale]

Found it, works like charm! Thank you

[@colytv4116]

THANK YOU!!!

[@RebeccaGraceDesigns]

You're welcome!

[@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.

[@askcoachlara]

I have the same question.

[@JonH-]

hey - @@askcoachlara I was having this issue, but it's working by including the "/* Description text */ header before the code for each instance. Hope that helps!

[@RebeccaGraceDesigns]

You can just duplicate the code for each time you want to repeat it. Or you can use a comma between each block id. For example, /* Change Image on Hover */ #BLOCKID, #BLOCKID2 { opacity: 0; -webkit-transition: opacity 0.5s ease-in-out; -moz-transition: opacity 0.5s ease-in-out; transition: opacity 0.5s ease-in-out; } #BLOCKID:hover, #BLOCKID2:hover { opacity: 1; }

[@TRIUMVIRATEMEDIA]

@@RebeccaGraceDesigns thank you so much

[@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?

[@RebeccaGraceDesigns]

If you overlap the images, you should only see one on mobile. You can always use code to hide one of the images on mobile. For example, @media only screen and (max-width: 640px) { #BLOCKID { display:none; } }

[@cmdluke]

@@RebeccaGraceDesigns thanks for this. works on desktop. I can hide the rollover on mobile, but it breaks the link. Any fix? much appreciated.

[@RebeccaGraceDesigns]

Make sure the link is placed in the image that is on top.

[@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!

[@RebeccaGraceDesigns]

The GIF will play based on when it loads. As far as I know, there isn't a way to start the gif on hover with this method. You would have to code the static image and gif in a code block instead of using two image blocks.

[@MaryMihelic]

This works in desktop mode but th ecode doesn't work in the moblie mode? How do you fix that?

[@RebeccaGraceDesigns]

Phones don't have a hover option. You have to click and hold. You can either have just the one image or have the code turn off on mobile and then move the images so that you can see both.

[@proph7099]

Would this apply to text as well? If i wanted to have a text block shift the image show for the background, could i do that with this CSS?

[@RebeccaGraceDesigns]

Because we are using a block id, you should be able to apply this to text and other blocks.

[@thinklindi]

Amazing fix for desktop! But sadly doesn't work on mobile. I hid the overlay image using CSS and it still creates a big gap of empty space below the first image.

[@RebeccaGraceDesigns]

Its possible the space underneath is the image that is being hidden for the hover. Mobile's don't have hover. So my suggestion is to either just display the one image (drag the hidden image overtop on mobile so you don't have the space) or turn the code off on mobile and have both images show.

[@greatdominions]

Looks like it's not working on mobile (I know you can't hover on mobile, but you mentioned if you click it, it will change. It's not for me.)

[@RebeccaGraceDesigns]

Is it working on desktop? Did you click and hold? As an alternative, you could also hide the top image on mobile so that the bottom image displays right away without any clicking.

[@caelanstokkermans533]

@@RebeccaGraceDesigns Could you go a bit more in depth as to how that would work? Trying to figure out how to make it so the mobile site will transition with touch.

[@WaldronDesigns]

You don't have a tutorial on how to do this for us 7.0 users, do you? Looks like this is for 7.1

[@RebeccaGraceDesigns]

This will only work on 7.1 because it uses Fluid Engine to overlap the images. For 7.0, you would probably have to custom code the image blocks as well.

[@claireperkins6038]

Thank you!

[@RebeccaGraceDesigns]

You're welcome!

[@colekeller]

Thank you!