Jump to content

image change on cursor/mouse hover

Recommended Posts

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

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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
  • 2 weeks later...
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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 3 months later...
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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.