image change on cursor/mouse hover

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

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;
}

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!! 🤜🏼🤛🏼

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.

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?

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

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

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