JDMD Posted December 1, 2021 Share Posted December 1, 2021 Site URL: https://www.thegardenersonline.com/meet-the-team Hi, I'm new to the forum having been directed here by the Squarespace help team. Pretty funny how they basically just say, "sorry but you're better off asking other users"! 😂 So my fellow users, here's what I'd like to do if possible - on my "meet the team" page, there's a photo of each team member (a "sensible" head and shoulders portrait type) I thought it would be a nice touch, if when you hover the mouse/curser over a photo, it switches to a second photo, maybe of that person when they were a kid, or just doing something silly. Just to make it a bit more personal and fun. I have very little tech knowledge about how to implement this kind of stuff though, I'm just a gardener sorry! Having read some of the correspondence here, it looks like a foreign language to me!! So a) is that possible? and b) is there a way of explaining how to do this, to a non tech savvy simpleton like me!?? Here's the page:https://www.thegardenersonline.com/meet-the-team My site uses the "Bedford" template if that helps. Thanks for reading. Happy to offer some garden advice in return! 😉 x Link to comment
tuanphan Posted December 2, 2021 Share Posted December 2, 2021 Add this code to Design > Custom CSS. If it works, we will send code for other images This code for James, first image /* meet the team - james */ div#block-yui_3_17_2_14_1491398835883_8001>div:hover img { visibility: hidden; } div#block-yui_3_17_2_14_1491398835883_8001>div:hover .intrinsic { background-image: url(https://cdn.pixabay.com/photo/2020/02/09/20/42/marriage-proposal-4834488__340.jpg); background-size: cover; background-repeat: no-repeat; } JDMD 1 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
JDMD Posted December 3, 2021 Author Share Posted December 3, 2021 On 12/2/2021 at 8:14 AM, tuanphan said: Add this code to Design > Custom CSS. If it works, we will send code for other images This code for James, first image /* meet the team - james */ div#block-yui_3_17_2_14_1491398835883_8001>div:hover img { visibility: hidden; } div#block-yui_3_17_2_14_1491398835883_8001>div:hover .intrinsic { background-image: url(https://cdn.pixabay.com/photo/2020/02/09/20/42/marriage-proposal-4834488__340.jpg); background-size: cover; background-repeat: no-repeat; } OMG! That's incredible!! Thank you so much. I have no idea how that works, but it does! Amazing. 👏🏼 So my next question is how do I change/upload the secondary image that I'd like to appear when the cursor hovers over the photo please? Thanks again!! 🤜🏼🤛🏼 Link to comment
tuanphan Posted December 13, 2021 Share Posted December 13, 2021 On 12/4/2021 at 1:32 AM, JDMD said: OMG! That's incredible!! Thank you so much. I have no idea how that works, but it does! Amazing. 👏🏼 So my next question is how do I change/upload the secondary image that I'd like to appear when the cursor hovers over the photo please? Thanks again!! 🤜🏼🤛🏼 Follow 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
panelist Posted March 29, 2022 Share Posted March 29, 2022 Hi, I would really like to figure out how to do image rollovers as well, but I am very NOT code-knowledgeable. Can anyone tell me a simple way to make this happen? Link to comment
tuanphan Posted March 31, 2022 Share Posted March 31, 2022 On 3/29/2022 at 11:53 PM, panelist said: Hi, I would really like to figure out how to do image rollovers as well, but I am very NOT code-knowledgeable. Can anyone tell me a simple way to make this happen? Can you share link to page where you use image? We can give the code to make rollover effect easier 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
panelist Posted March 31, 2022 Share Posted March 31, 2022 I haven't started building the page yet. At first I was using a Gallery, but that seemed to create problems for interactivity. Here is the page whose interaction I want to copy: https://goodear.tv/about Link to comment
tuanphan Posted April 2, 2022 Share Posted April 2, 2022 On 3/31/2022 at 8:12 PM, panelist said: I haven't started building the page yet. At first I was using a Gallery, but that seemed to create problems for interactivity. Here is the page whose interaction I want to copy: https://goodear.tv/about When you can share url, we can help easier No way to give code to do this without checking url 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment