This is so great Sam! I have tried to do hover effects before but they always targeted the whole site! I love this effect and now I know how to target just one section - so helpful as ever Sam! Love the Goldilocks time of 0.3 s - just right! ha ha
Hello Sam, this is brilliant, thank you for sharing this code and how to get it up and running it is very much appreciated and looks superb! Very pleased with the effect!
Hi Sam! One question, how do you make sure that the elements on the image, like text and buttons in your video have the same hover effect and move simultaneously? Many thanks!
Hey! So this is automatic thanks to the section being 'Classic Editor' and not Fluid Engine. This means I can use a poster image block which contains the text and button. Hope that makes sense?
Thanks, Sam. Do you have a tutorial on how to overlay link buttons onto photographs? I know how to make a photograph a link, but I like the effect of the button over the image that you have
Hey Glenn! I don't, but if you use the Classic Editor, you'll be able to change your 'Image Style' to 'Poster' which will add a button over the top if you select 'Add Link > On Button' in the image design tab. Does that make sense? Let me know!
@@bycrawford Yes it does, thank you! That's exactly what I was looking for. In a related question, do you have a tutorial on how to change an image on hover? I love this trick of having the image rise sightly on the page and will be using it, but I was wondering about having the image change slightly, perhaps from a clouded image to a clear image, for example
This is great! So simple, but i cannot for the life of me keep the effect confined within a certain section. I believe i've followed your instructions to the tee. Any suggestions?
Thank you! To do this: - Target the section ID (I have a video on this here: ruclips.net/video/V-v2cauDRDo/видео.html&ab_channel=SamCrawford%7CSquarespaceExpert) - Wrap the code in that section ID That would then look like this: SECTION-ID-GOES-HERE [ .sqs-block-image { transition: 0.3s !important; &:hover { transition: 0.3s !important; margin-top: -10px; } } }
@@bycrawford I did this. I found out it is because the updating of the code is somewhat bugged on squarespace. So after a bit of reloading and retrying it works as it should. Thanks!
This is so great Sam! I have tried to do hover effects before but they always targeted the whole site! I love this effect and now I know how to target just one section - so helpful as ever Sam! Love the Goldilocks time of 0.3 s - just right! ha ha
Thanks so much Lee! Glad you found it useful - as well as the Goldilocks time ha!
Hello Sam, this is brilliant, thank you for sharing this code and how to get it up and running it is very much appreciated and looks superb! Very pleased with the effect!
Thanks a lot for the kind words! Really happy to hear it's working well for you
Hi Sam! One question, how do you make sure that the elements on the image, like text and buttons in your video have the same hover effect and move simultaneously?
Many thanks!
Hey! So this is automatic thanks to the section being 'Classic Editor' and not Fluid Engine. This means I can use a poster image block which contains the text and button.
Hope that makes sense?
Thanks, Sam. Do you have a tutorial on how to overlay link buttons onto photographs? I know how to make a photograph a link, but I like the effect of the button over the image that you have
Hey Glenn! I don't, but if you use the Classic Editor, you'll be able to change your 'Image Style' to 'Poster' which will add a button over the top if you select 'Add Link > On Button' in the image design tab.
Does that make sense? Let me know!
@@bycrawford Yes it does, thank you! That's exactly what I was looking for. In a related question, do you have a tutorial on how to change an image on hover? I love this trick of having the image rise sightly on the page and will be using it, but I was wondering about having the image change slightly, perhaps from a clouded image to a clear image, for example
THANK YOU!!
My pleasure! You're very welcome :)
This is great! So simple, but i cannot for the life of me keep the effect confined within a certain section. I believe i've followed your instructions to the tee. Any suggestions?
Thank you! To do this:
- Target the section ID (I have a video on this here: ruclips.net/video/V-v2cauDRDo/видео.html&ab_channel=SamCrawford%7CSquarespaceExpert)
- Wrap the code in that section ID
That would then look like this:
SECTION-ID-GOES-HERE [
.sqs-block-image {
transition: 0.3s !important;
&:hover {
transition: 0.3s !important;
margin-top: -10px;
}
}
}
@@bycrawford I did this. I found out it is because the updating of the code is somewhat bugged on squarespace. So after a bit of reloading and retrying it works as it should. Thanks!
Ah gotcha! @@tornt7933
hey! i there a hover effect for videos that can do something like GIFS?
Yep! Try this plugin: squarerefresh.com/plugins/autoplay-video-hover
What's the workaround if you have images stacked on top of each other? I got it to work on the top row, but the bottom row of images won't budge.
It should be the same code. Hard to know without seeing the actual site in action.
Drop me a like at sam@bycrawford.com and I'll take a look for you!
Hi Sam! I am able to get this to work while in editing mode, but when I save it and preview, my images no longer move. Any suggestions?
Thanks!
Hey Christi! Have you tried it in an incognito window?
@@bycrawford That did the trick! Amazing. Thank you so much.