sandradee13 Posted November 13, 2017 Share Posted November 13, 2017 (edited) Hi All, I am looking to create a team page with the same effect as this page has - https://www.conducthq.com/about-us/. Would like to have one picture change to another when you hover over it. I know squarespace can only do this with custom code. Can anyone help with this or point me in the right direction? Any help would be greatly appreciated! Thanks Sandra Edited November 13, 2017 by sandradee13 Initial Revision Link to comment
mandeep Posted November 14, 2017 Share Posted November 14, 2017 yes you can do through code block . use html + css for this. <!DOCTYPE html> <html lang="en"> <head> <title>Change Image on Hover in CSS</title> <style type="text/css"> .card { width: 130px; height: 195px; background: url("/examples/images/card-back.jpg") no-repeat; margin: 50px; } .card:hover { background: url("/examples/images/card-front.jpg") no-repeat; } </style> </head> <body> <div class="card"></div> </body> </html> Iza 1 Mandeep Rajasthani Squarespace Website Designer Contact me: mandeeprajasthan@gmail.com Link to comment
shanonstevenson Posted November 14, 2017 Share Posted November 14, 2017 Thanks very much for your help, I had the same problem with my site all slot bonuses and was trying to solve it for a very long time. I really appreciate your assistance! Link to comment
Kico Posted April 3, 2018 Share Posted April 3, 2018 It's been a while but if you're still out there would this code be injected in a code block, the page header code injection, or site custom CSS? Thanks! Link to comment
broif Posted April 15, 2018 Share Posted April 15, 2018 Awesome - Thanks so much for sharing! Works like a charm. The only issue that's coming up is when I use this code on multiple blocks on the same page. Even with different url's pasted in - which ever code block is last on my page - every block takes that property. Any idea why? @mandeep Thanks!! Link to comment
broif Posted April 15, 2018 Share Posted April 15, 2018 Awesome - Thanks so much for sharing! Works like a charm. The only issue that's coming up is when I use this code on multiple blocks on the same page. Even with different url's pasted in - which ever code block is last on my page - every block takes that property. Any idea why? @mandeep Thanks!! Link to comment
jordanford10 Posted April 21, 2018 Share Posted April 21, 2018 I don't quite understand how to implement this code. It keeps saying syntax error. Can anyone help? Im also trying to achieve the same effect on my team page. Thanks! Link to comment
jordanford10 Posted April 21, 2018 Share Posted April 21, 2018 I don't quite understand how to implement this code. It keeps saying syntax error. Can anyone help? Im also trying to achieve the same effect on my team page. Thanks! Link to comment
Guest Posted May 31, 2018 Share Posted May 31, 2018 did you ever get this working? I tried the HTML mandeep posted, in a "Code" block, but it doesn't work... Link to comment
kittyDeki Posted September 5, 2018 Share Posted September 5, 2018 This code isn't working for me. Did anyone manage to work out how to fix this? Link to comment
Guest Posted September 5, 2018 Share Posted September 5, 2018 (edited) I've used this code successfully in a Code Block: <img src="COVER_IMAGE" onmouseover="this.src='OTHER_IMAGE'" onmouseout="this.src='COVER_IMAGE'"> In order to use this, open Design > Custom CSS > "Manage Custom Files" Upload your "Cover Image" file (the image you want to display by default). Click on that image in the file browser Now in the CSS editor you will see a link that looks something like https://static.squarespace.com/Cover_Image.png Copy that link and paste it in place of COVER_IMAGE in the code block Repeat 1-4 with your "Other Image" (the image you want to display while hovering) and paste the link in place of OTHER_IMAGE in the code block Good luck Edited September 5, 2018 by blaek Initial Revision Link to comment
Guest Posted September 5, 2018 Share Posted September 5, 2018 I'm not a programmer, so I can't really offer any further advice on the subject... sorry. Link to comment
MJ44 Posted December 5, 2018 Share Posted December 5, 2018 Hi, this works great. whats the easiest way to add a click-through link.Basically, I want it to change the image on hover and when someone clicks it goes to another page Link to comment
MJ44 Posted December 5, 2018 Share Posted December 5, 2018 Hi, this works great. whats the easiest way to add a click-through link.Basically, I want it to change the image on hover and when someone clicks it goes to another page Link to comment
davidpascott Posted April 8, 2019 Share Posted April 8, 2019 Did you get a response on this one? Seems like a good question! Link to comment
miahanson Posted October 30, 2019 Share Posted October 30, 2019 Hi All, This worked for me to some extent. I get the change of image on the rollover, but can't get it to switch back to the original. I've checked syntax a hundred times and everything is there. Any thoughts? Thanks! Mia Link to comment
Lennetje Posted February 13, 2020 Share Posted February 13, 2020 Thanks Blaek for this piece of coding! I saw some questions on how to add a click-through link to the image. This answer probably comes a bit too late for you guys ; ) but here it is anyway (maybe it will help somebody else in the future). Just put the following code in front of Blaek's: <a href="https://www.yoursitename.com/pageyouwanttolinkto"> Make sure that after Blaek's code, you close the tag: </a> JulesASmith 1 Link to comment
Lyndsey_M Posted August 19, 2020 Share Posted August 19, 2020 (edited) Thanks for the help! Any idea how to add text over the images that would remain the same as you hover? Edited August 19, 2020 by Lyndsey_M Link to comment
tuanphan Posted August 20, 2020 Share Posted August 20, 2020 15 hours ago, Lyndsey_M said: Thanks for the help! Any idea how to add text over the images that would remain the same as you hover? Can you share link to page where you use effect? We can take a look Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
zigzag Posted November 25, 2020 Share Posted November 25, 2020 On 4/15/2018 at 7:41 PM, broif said: Awesome - Thanks so much for sharing! Works like a charm. The only issue that's coming up is when I use this code on multiple blocks on the same page. Even with different url's pasted in - which ever code block is last on my page - every block takes that property. Any idea why? @mandeep Thanks!! I'm getting this same problem. Anyone managed to find a fix? Link to comment
tuanphan Posted December 3, 2020 Share Posted December 3, 2020 On 11/26/2020 at 5:05 AM, zigzag said: I'm getting this same problem. Anyone managed to find a fix? to make image hover change, you can use this guide. Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
HCow Posted February 15, 2021 Share Posted February 15, 2021 (edited) On 4/15/2018 at 2:41 PM, broif said: The only issue that's coming up is when I use this code on multiple blocks on the same page. Even with different url's pasted in - which ever code block is last on my page - every block takes that property. Any idea why? Thanks!! @broif @zigzag I ran into the same issue, but the second suggested code works great for multiple blocks on the same page: <img src="COVER_IMAGE" onmouseover="this.src='OTHER_IMAGE'" onmouseout="this.src='COVER_IMAGE'"> Edited February 15, 2021 by HCow Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment