Carl Thanks for all the tips and great methods to make awesome work! Is there a way to create an animated counter when scrolling through a website without using a third party widget?
Thanks for the tutorial! Wondering how to resolve the issue of needing to click twice on mobile? Right now when I click on the image on mobile at first it zooms in rather than directing to the link. When I click again it then goes to the link.
Super helpful! Thank you Carl. Is there a way to allow the zoom to stay within the bonds of the container? It seems to make the image grow larger on my page at the same time as it zooms.
@@Serenitinow If you haven't got too many photos in the section the easiest way would be to add multiple block ID's before the CSS separated by commas. Like this for example: #YOURBLOCKID:hover img, #YOUOTHERBLOCKID:hover img, #ANOTHERBLOCKID:hover img { CSS from the video here }
Thanks so much for posting this tutorial, I have a quick question, do you know if their is a way to click or hover over the image to show it bigger or full screen? You may already have a video on it but I just found and subscribe to your channel. thanks again.
Carl Johnson good morning and yes, in my website that I’m building I have multiple image galleries all different shapes and sizes, but haven’t figured out a way to do some sort of lightboxing, if there is a way! Thanks again!
Carl Johnson, I’m using gallery blocks and I think I just figured it out! Unless you think there’s a better way to do it, thank you again, I’m enjoying your channel! raulcordo.com
This is so super Carl, thank you. Is there any reason it wouldn't work? I'm on a Brine template but it is not a live template. I've done all the code as per your video but it doesn't seem to do a thing... eeee.... any suggestions would be so appreciated!
@@harestonmanorweddings4379 Could you share the code exactly as you've put it into Squarespace, please? Sometimes it can be a space that shouldn't be there etc.
Hey Bryce. Image transition wise I've got a video planned for revealing text and a colour overlay on hover. It's quite complex compared to the image zoom effect, so I'm just in the process of trying to tidy the code up to make it as simple as possible. Is there anything in particular you'd like to see?
Thanks @@laurencewoodward658 😀 As I said, it's quite lengthy to put in a video at the moment, but if you'd like to email me I'll send you the code that I'm working on at the moment.
Can you create a tutorial on how to add multiple effects? For example the hover with an extra code that changes it to a specific colour. I've seen people ask for this but no response from the forums. I think incorporating the code may be the issue? At any rate applying it to the code here, so that its integrated would be great!
I got a syntax error when I started the "transform: scale" line I followed exactly what you did. not sure what I'm doing wrong here. Great video! subscribed!
Hi Jason, a syntax error can be caused by a number of things like a missed comma etc. Can you share the code as you've put it in and I'll have a look. Thanks for the subscribe 👍
@@Carl_Johnson #block-yui_3_17_2_1_1571603240087_7638:hover img{ transform: scale{1.1}; transition: .4s ease-in-out; } heres the code. I also tried it on other blocks, but no luck. Also, tried it exactly how you've done it and I still get the syntax error. help would greatly be appreciated. Thank you!
@@abstrakhatch It looks likes there are a couple of curly brackets where there should be normal brackets ...in the transform scale line. This should work: yui_3_17_2_1_1571603240087_7638:hover img { transform: scale(1.1); transition: .4s ease-in-out; }
Could this work in conjunction with the code from your other video "Change Image on Hover"? I can't quite figure it out without breaking one of the functions.
@@Carl_Johnson Hi Carl, I've actually just switched from Mac to PC this week and it's now working perfectly, maybe there's issues with the Mac version?
Hi Carl! I am receiving an error on the "transform" line - can you help? #block-yui_3_17_2_1_1625000307678_11495:hover img { transform: scale{1.1}; transition: .4s ease-in-out; }
Hello Carl! I wanted to ask you if there is a way to continue the zoom in while the mouse is still over the image. What I see is that after the scaling is complited the image is stopping. But I would like to continue the motion if the mouse is still over, like a breathe in/out effect... Thank you in any case for the great tutorial!
Hey Carl :), thanks for your nice tutorials. I tried it out and at first on the squarespace preview the right effect showed up. But after loading it on the actual domain the picture is zooming out.. so the whole picture is getting bigger instead of zooming into the fixed picture.. I made everything exactly like you.. can you think of a reason why? Greets from Germans, Dana
ok i have to update .. if the normal design is used it works but as soon as you choose another one with the titel shown or a button, such as poster or overlap it does the reversed effect of zooming the picture out. Do you think theres a solution to combining another image design with this zoom in effect? :)
Hi, Carl. Thank you for the tutorial! It's really great! I am just wondering if there is a way to specify a center point for the zoom. There gotta be a way.. right?
Hey Sejung, Sure, you can move the image around in the container. So if you add this to the first part of the CSS that I cover in the video (just after transition: .4s ease-in-out;) margin-left: 0%; margin-top: 0%; Then if you place the mouse over the image so it's zoomed in you'll be able to see as you move the picture around. To move it left and right change the margin-left percentage to higher or lower values, so 30% (for example) to move right, or -30% to move it left. You can do the same with margin-top to move it up and down.
Thanks Carl, very helpful! One question: it works great when I copy your code for an individual image. However, When combining multiple images on one page (as a kind of gallery), the code doesn't seem to give any response. Do images behave differently when combined?
@@Carl_Johnson I guess I'm doing something wrong (-:). This is the page, code for zooming in and out is inserted for the upper left image. www.architectuurfotograaf.nl/testoomen2-1
Hey Hannah, unfortunately this particular piece of code doesn't work with gallery blocks ...it sees the all of the images in the gallery as one and zooms them all at the same time.
Is there a way to do this same effect for project image thumbnails on the homepage with an index? Similar to the "Project Image Zoom" style of Flatiron, but on other templates :D
aha! used your css with a.index-item-link.intrinsic instead of #block / #collection and works perfectly. Leaving comments in case someone else stumbles across the same issue! Thanks!
will this work for a gallery that shows up in a lightbox? I assume that the #block is the problem would you put it to #lightbox ?? Love to hear your thoughts.
Hey Carl, Im having the same problem as Micheal that when I paste over the block code using the plugin I get a syntax error which means I need to delete the code. Any ideas as to why that may happen? thanks. Code looks like this #block-yui_3_17_2_1_1574892428254_24909
Hey Bob, if you email me at the email address in the about tab on my channel I'll send it over. All of my videos will eventually have an accompanying blog post ...one day.
I'd love to see a tutorial on implementing the hover-to-zoom for product images. The only option in squarespace currently is to click the product image, which brings up the image with a black background, which is not what I want. Let me know if you have any ideas on how to do this.
Hi Dylan! What template are you using? Some templates have that effect built in in the Site Styles menu. If your template supports it you'll need to be on an individual product page for the option to show up in Site Styles. There you can find it under Products: Image Zoom where you're given the option activate zoom on hover and disable the lightbox.
I've followed your tutorial a couple of times and I keep getting a syntax error on "line 1" as soon as I paste the image code into the CSS box. Any thoughts on how to fix??
Can I apply same code to multiple blocks without duplicating entire code over and over again? Working with at least 20 images to apply this to. Something like: #block-0b7804d11dbab58f4fec: #block-3c16312d5b5169f9939e: #block-cef91fd14cb851843135: hover img { transform: scale(2.0); transition: 1.5s ease-in-out; margin-left: 0%; margin-top: 0%; }
I can't get this to work at all :( Here is the code I am using: #block-43902475645aa9021bd3:hover img { transform: scale (1.1); transition: .4s ease-in-out; #block-43902475645aa9021bd3 img { transform: scale (1); transition: .4s ease-in-out; Is it not working on the new version of squarespace or something? Would really appreciate if you could help, thank you!
Hi Stephanie, no it works fine in Squarespace 7.1. You have got a couple of curly brackets missing. Try this: #block-43902475645aa9021bd3:hover img { transform: scale(1.1); transition: .4s ease-in-out; } #block-43902475645aa9021bd3 img { transform: scale(1); transition: .4s ease-in-out; } Let me know how you get on.
Hi Carl, great videos! I wasn't sure where to contact you but I was wondering if you knew how to do svg animated paths on scroll. I found this SS site and love the shapes animating in the background noughtsandones.com/ Any idea how to achieve this? A tutorial would be amazing!
Hi Mike, Thanks 😀I've not worked too much with SVG animations, so, off the top of my head I've only got a rough idea how they've done that. Try reaching out to Tom Locke (twitter.com/noughtsandtoms), he's the founder of Noughts & Ones so may be able to help.
Carl Johnson thanks! Oh I have definitely written to him and joined his FB groups. Many of us are demanding. Haha anyhow wasn’t sure if you knew. I think I’m going to try and figure it out. Look forward to the next vid!
Thank you so much. A lot of tutorials show you how to make a zoom in transition on hover but not a zoom out. This is so helpful thank you.
This helped me immensely! Thanks!
This was a perfect tutorial in every way, clear walk throughs for an amateur like me to follow. Please do keep it up.
Thanks for your positive comments Jacob 😀 Much appreciated.
Couldn't agree more! It's so much better and useful than most of SQ's help sections on image zoom.
Gosh! Absolutely wiiicked... THX 4 that.. very cool effect. Cheers from Switzerland, Zürich
This video saved me! Thanks!!!
Extremely helpful tutorial, thank you! The block identifier is so handy too.
This is great! Exactly what I was looking for, thank you so much.
No problem Josie!
Carl Thanks for all the tips and great methods to make awesome work! Is there a way to create an animated counter when scrolling through a website without using a third party widget?
Thanks so much, But what if i have 20 pictures i want this effect on, there must be a way to bundel them in one piece of code right?
Thank you so much!
Great tutorial!
Thanks Tina
Is there any way to choose the zoom point? I want this but be flexible where to zoom like a map
Thanks for the tutorial! Wondering how to resolve the issue of needing to click twice on mobile? Right now when I click on the image on mobile at first it zooms in rather than directing to the link. When I click again it then goes to the link.
Nice video m8 big help
Super helpful! Thank you Carl. Is there a way to allow the zoom to stay within the bonds of the container? It seems to make the image grow larger on my page at the same time as it zooms.
Just what I was looking for!
Thanks a lot :)
Can you please let me know how I can give this effect to all the images in a section.
No problem! Is it Squarespace 7, or 7.1 you are using?
@@Carl_Johnson Thanks for quick reply, it's 7.1
@@Carl_Johnson Also please let me know if I get this kind of effect www.pandadoc.com/integrations/?ref=saaswebsites.com
@@Serenitinow If you haven't got too many photos in the section the easiest way would be to add multiple block ID's before the CSS separated by commas. Like this for example:
#YOURBLOCKID:hover img, #YOUOTHERBLOCKID:hover img, #ANOTHERBLOCKID:hover img {
CSS from the video here
}
Trying this now and it doesnt seem to work. wonder if it doesnt work with the latest SS version.
Is it possible to do this within a gallery ?
I'm looking into doing a gallery version. It's not as simple as the method for a single image though.
Thanks so much for posting this tutorial, I have a quick question, do you know if their is a way to click or hover over the image to show it bigger or full screen? You may already have a video on it but I just found and subscribe to your channel. thanks again.
Hey Raul! Thanks for the subscribe 😀 Do you mean like a lightbox sort of thing?
Carl Johnson good morning and yes, in my website that I’m building I have multiple image galleries all different shapes and sizes, but haven’t figured out a way to do some sort of lightboxing, if there is a way! Thanks again!
@@rcordo2000 are you using a Gallery Block or individual image blocks?
Carl Johnson, I’m using gallery blocks and I think I just figured it out! Unless you think there’s a better way to do it, thank you again, I’m enjoying your channel! raulcordo.com
This is so super Carl, thank you. Is there any reason it wouldn't work? I'm on a Brine template but it is not a live template. I've done all the code as per your video but it doesn't seem to do a thing... eeee.... any suggestions would be so appreciated!
Thanks! Are you getting a syntax error in the CSS editor?
@@Carl_Johnson I am, line 3: transform: scale(1:5);
@@harestonmanorweddings4379 Could you share the code exactly as you've put it into Squarespace, please? Sometimes it can be a space that shouldn't be there etc.
Alisha Winn glad you got it sorted 😀
Superb work Carl is there any other awesome transitions worth testing from your experience
Hey Bryce. Image transition wise I've got a video planned for revealing text and a colour overlay on hover. It's quite complex compared to the image zoom effect, so I'm just in the process of trying to tidy the code up to make it as simple as possible. Is there anything in particular you'd like to see?
@@Carl_Johnson Hi mate, how are you getting on with that video? That's something I'd be really interested in. Nice vid as always.
Thanks @@laurencewoodward658 😀 As I said, it's quite lengthy to put in a video at the moment, but if you'd like to email me I'll send you the code that I'm working on at the moment.
hi Carl, I was wondering is there a way to do slow constant zoom in and outs on imagery without hovering over them?
Can you create a tutorial on how to add multiple effects? For example the hover with an extra code that changes it to a specific colour. I've seen people ask for this but no response from the forums. I think incorporating the code may be the issue? At any rate applying it to the code here, so that its integrated would be great!
Yeah definitely one to do. Thanks for the suggestion. If you can’t wait for the video feel free to email me and I’ll help you out.
@@Carl_Johnson Hi Chris,
That would be great! I've just signed up for email updates but cant see your email addy? Thanks Carl!!!
I got a syntax error when I started the "transform: scale" line I followed exactly what you did. not sure what I'm doing wrong here. Great video! subscribed!
Hi Jason, a syntax error can be caused by a number of things like a missed comma etc. Can you share the code as you've put it in and I'll have a look. Thanks for the subscribe 👍
@@Carl_Johnson
#block-yui_3_17_2_1_1571603240087_7638:hover
img{
transform: scale{1.1};
transition: .4s ease-in-out;
}
heres the code. I also tried it on other blocks, but no luck. Also, tried it exactly how you've done it and I still get the syntax error. help would greatly be appreciated. Thank you!
@@abstrakhatch It looks likes there are a couple of curly brackets where there should be normal brackets ...in the transform scale line. This should work:
yui_3_17_2_1_1571603240087_7638:hover
img {
transform: scale(1.1);
transition: .4s ease-in-out;
}
@@Carl_Johnson THANK YOU!!!!! you are awesome for responding. Keep up the great videos!!
Could this work in conjunction with the code from your other video "Change Image on Hover"? I can't quite figure it out without breaking one of the functions.
Hi Doug! It could but it would be a bit lengthy to explain here. Feel free to message me at the email address in the About tab on my channel.
Great video mate, I can't get that block identifier extension to work for me though?
Hi Laurence. Yeah, I've had a few people mention that the block identifier can be a bit problematic. Have you tried removing it and reinstalling it?
@@Carl_Johnson Hi Carl, I've actually just switched from Mac to PC this week and it's now working perfectly, maybe there's issues with the Mac version?
Hi Carl! I am receiving an error on the "transform" line - can you help?
#block-yui_3_17_2_1_1625000307678_11495:hover img {
transform: scale{1.1};
transition: .4s ease-in-out;
}
Also, I'm using squarespace 7.1
Hello Carl! I wanted to ask you if there is a way to continue the zoom in while the mouse is still over the image.
What I see is that after the scaling is complited the image is stopping. But I would like to continue the motion if the mouse is still over, like a breathe in/out effect...
Thank you in any case for the great tutorial!
Resolved. I added seconds and it works fine, thanks again!
Hi Francesca. Glad you got it sorted 😀
Hey Carl :), thanks for your nice tutorials. I tried it out and at first on the squarespace preview the right effect showed up. But after loading it on the actual domain the picture is zooming out.. so the whole picture is getting bigger instead of zooming into the fixed picture.. I made everything exactly like you.. can you think of a reason why? Greets from Germans, Dana
ok i have to update .. if the normal design is used it works but as soon as you choose another one with the titel shown or a button, such as poster or overlap it does the reversed effect of zooming the picture out. Do you think theres a solution to combining another image design with this zoom in effect? :)
Hi, Carl. Thank you for the tutorial! It's really great! I am just wondering if there is a way to specify a center point for the zoom. There gotta be a way.. right?
Hey Sejung, Sure, you can move the image around in the container. So if you add this to the first part of the CSS that I cover in the video (just after transition: .4s ease-in-out;)
margin-left: 0%;
margin-top: 0%;
Then if you place the mouse over the image so it's zoomed in you'll be able to see as you move the picture around. To move it left and right change the margin-left percentage to higher or lower values, so 30% (for example) to move right, or -30% to move it left.
You can do the same with margin-top to move it up and down.
@@Carl_Johnson Thanks Carl! I will try out today-!
@@Carl_Johnson Thank you. You're a life saver*.
*not literally, but this was really helpful regardless.
Ha ha, thanks Olga 😀
Thanks Carl, very helpful! One question: it works great when I copy your code for an individual image. However, When combining multiple images on one page (as a kind of gallery), the code doesn't seem to give any response. Do images behave differently when combined?
Hi Rob. It should be fine with multiple images. Could you send me the link to your site?
@@Carl_Johnson I guess I'm doing something wrong (-:). This is the page, code for zooming in and out is inserted for the upper left image. www.architectuurfotograaf.nl/testoomen2-1
Hi Carl, how are you? i have applied to your thought for image zoom. but when i reload my page then i get the result.
Hey this is super helpful, but how do you do it with a gallery block or gallery page? I cant seem to get the id from identifier plug in?
Hey Hannah, unfortunately this particular piece of code doesn't work with gallery blocks ...it sees the all of the images in the gallery as one and zooms them all at the same time.
Is there a way to do this same effect for project image thumbnails on the homepage with an index? Similar to the "Project Image Zoom" style of Flatiron, but on other templates :D
I'm able to get it to work on the collection, but then this adds the zoom to all of the project images instead of just the one on hover...
aha! used your css with a.index-item-link.intrinsic instead of #block / #collection and works perfectly. Leaving comments in case someone else stumbles across the same issue! Thanks!
will this work for a gallery that shows up in a lightbox? I assume that the #block is the problem would you put it to #lightbox ?? Love to hear your thoughts.
Hi Justin 👋
A few people have asked a similar question ...it's on my list of future vids
Hi, Carl, how are you? firstyl i apply the code i get a result but i do not get the result after reload the page.
Hi Maknun. I'm good, thanks 😀Do you have Ajax Loading enabled in the Site Styles menu? If so, my first thought would be to turn that off.
Hey Carl, Im having the same problem as Micheal that when I paste over the block code using the plugin I get a syntax error which means I need to delete the code. Any ideas as to why that may happen? thanks. Code looks like this #block-yui_3_17_2_1_1574892428254_24909
Hi Hannah, when you paste the block id in you do initially get a syntax error, but this should disappear once you put the following curly brackets.
Can you post the code in the comments? I have a hard time understanding your accent with some words. Thanks!
Do you have any source code that we could use to copy?
Hey Bob, if you email me at the email address in the about tab on my channel I'll send it over. All of my videos will eventually have an accompanying blog post ...one day.
Would the same code work on wordpress?
It should do Ryan.
I'd love to see a tutorial on implementing the hover-to-zoom for product images. The only option in squarespace currently is to click the product image, which brings up the image with a black background, which is not what I want. Let me know if you have any ideas on how to do this.
Hi Dylan! What template are you using? Some templates have that effect built in in the Site Styles menu. If your template supports it you'll need to be on an individual product page for the option to show up in Site Styles. There you can find it under Products: Image Zoom where you're given the option activate zoom on hover and disable the lightbox.
I've followed your tutorial a couple of times and I keep getting a syntax error on "line 1" as soon as I paste the image code into the CSS box. Any thoughts on how to fix??
Hi Michael, can you share the code exactly how you've entered it please?
Can I apply same code to multiple blocks without duplicating entire code over and over again?
Working with at least 20 images to apply this to.
Something like:
#block-0b7804d11dbab58f4fec:
#block-3c16312d5b5169f9939e:
#block-cef91fd14cb851843135:
hover img {
transform: scale(2.0);
transition: 1.5s ease-in-out;
margin-left: 0%;
margin-top: 0%;
}
Hey Adrian. Sure, if you separate each block ID with a comma and a space you can target multiple blocks at once.
@@Carl_Johnson Thank you!!
I can't get this to work at all :( Here is the code I am using:
#block-43902475645aa9021bd3:hover
img {
transform: scale (1.1);
transition: .4s ease-in-out;
#block-43902475645aa9021bd3
img {
transform: scale (1);
transition: .4s ease-in-out;
Is it not working on the new version of squarespace or something? Would really appreciate if you could help, thank you!
Hi Stephanie, no it works fine in Squarespace 7.1. You have got a couple of curly brackets missing. Try this:
#block-43902475645aa9021bd3:hover
img {
transform: scale(1.1);
transition: .4s ease-in-out;
}
#block-43902475645aa9021bd3
img {
transform: scale(1);
transition: .4s ease-in-out;
}
Let me know how you get on.
@@Carl_Johnson Ahhhh thank you so much!!! You saved the day :)
muah~🦊
your such a cute dorky ginger !
Haha! I'll take that as a compliment Johna!
@@Carl_Johnson you totally should! as long as the carpet match the drapes lollllllll
Who’s thumbs-down this video?!
I know 😢
Hi Carl, great videos! I wasn't sure where to contact you but I was wondering if you knew how to do svg animated paths on scroll. I found this SS site and love the shapes animating in the background noughtsandones.com/ Any idea how to achieve this? A tutorial would be amazing!
Hi Mike, Thanks 😀I've not worked too much with SVG animations, so, off the top of my head I've only got a rough idea how they've done that. Try reaching out to Tom Locke (twitter.com/noughtsandtoms), he's the founder of Noughts & Ones so may be able to help.
Carl Johnson thanks! Oh I have definitely written to him and joined his FB groups. Many of us are demanding. Haha anyhow wasn’t sure if you knew. I think I’m going to try and figure it out. Look forward to the next vid!