Jump to content

Change product image on hover (7.1)

Recommended Posts

add to Home > Design > Custom CSS

div#block-yui_3_17_2_1_1576760789753_14465 a:hover img {
    visibility: hidden;
}
div#block-yui_3_17_2_1_1576760789753_14465 a:hover {
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/06/trees-3464777_640-min.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

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
  • 2 years later...
On 2/26/2022 at 4:52 AM, Sarah_Hallmarked said:

Hi Tuanphan, thanks so much for this although i am getting a 'ghosting' image when hovering under this section also, could you please tell me if there is a reason for it/ a workaround?

I've attached images for ref - the pack is shown on hover.

Thanks! Sarah 

Screen Shot 2022-02-25 at 21.51.45.png

Screen Shot 2022-02-25 at 21.51.38.png

I don't see your products on homepage. Can you share link to exact page?

 

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
On 3/1/2022 at 5:30 AM, Sarah_Hallmarked said:

Thanks so much - here is the link: https://petnatura.co.uk/rawfood

edit this class name

Quote

div#block-yui_3_17_2_1_1645696814640_3767 a:hover

to this

Quote

div#block-yui_3_17_2_1_1645696814640_3767 a:not(.product-title):hover

 

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
4 hours ago, tuanphan said:

edit this class name

to this

 

Thanks so much! I amended but it's now flashing blank on hover. I hope i have amended correctly to the below: 

 

div#block-yui_3_17_2_1_1645696814640_3767 a:not(.product-title):hover {
    visibility: hidden;
}
div#block-yui_3_17_2_1_1645696814640_3767 a:not(.product-title):hover {
    background-image: url(https://static1.squarespace.com/static/5fdcc5ea23f93f3b0a025847/t/621956096ed5e56712593edc/1645827595303/Pet+Natura+Veggie+Complete+Hover-01.png);
    background-size: cover;
    background-repeat: no-repeat;
}

Link to comment
On 3/4/2022 at 12:37 AM, Sarah_Hallmarked said:

Thanks so much! I amended but it's now flashing blank on hover. I hope i have amended correctly to the below: 

 

div#block-yui_3_17_2_1_1645696814640_3767 a:not(.product-title):hover {
    visibility: hidden;
}
div#block-yui_3_17_2_1_1645696814640_3767 a:not(.product-title):hover {
    background-image: url(https://static1.squarespace.com/static/5fdcc5ea23f93f3b0a025847/t/621956096ed5e56712593edc/1645827595303/Pet+Natura+Veggie+Complete+Hover-01.png);
    background-size: cover;
    background-repeat: no-repeat;
}

Did you solve or still need help?

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
On 3/9/2022 at 4:06 PM, Sarah_Hallmarked said:

Still need help please - hugely appreciated! I've left it as the flashing blank so you can see:

https://petnatura.co.uk/rawfood

Thank you 

Use this new code

div#block-yui_3_17_2_1_1645696814640_3767:hover a:not(.product-title) img {
    visibility: hidden
}

div#block-yui_3_17_2_1_1645696814640_3767:hover a:not(.product-title) {
    background-image: url(https://static1.squarespace.com/static/5fdcc5ea23f93f3b0a025847/t/621956096ed5e56712593edc/1645827595303/Pet+Natura+Veggie+Complete+Hover-01.png);
    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

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
  • 3 weeks later...
On 3/13/2022 at 10:46 AM, tuanphan said:

Use this new code

div#block-yui_3_17_2_1_1645696814640_3767:hover a:not(.product-title) img {
    visibility: hidden
}

div#block-yui_3_17_2_1_1645696814640_3767:hover a:not(.product-title) {
    background-image: url(https://static1.squarespace.com/static/5fdcc5ea23f93f3b0a025847/t/621956096ed5e56712593edc/1645827595303/Pet+Natura+Veggie+Complete+Hover-01.png);
    background-size: cover;
    background-repeat: no-repeat
}

 

Thanks so much! seems to have done the trick 🙌

Link to comment
  • 7 months later...
On 11/9/2022 at 4:44 AM, vccc said:

Hi! Thanks so much for this. I successfully switched out my product photo on hover, but it's also using the same image to switch out the hover on the product name. Is there a way to fix this?

What is your site url? We can check problem 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

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.