Change product image on hover (7.1)

Site URL: https://pelican-chiton-xwy4.squarespace.com/

Hola,

Trying to change the image for "FOS Classic" product entry on hover, in the Homepage right under "THE FOS COLLECTIONS" section.

Anybody knows how to do that on 7.1?? I'd be interested in keeping the section and not having to start over using code blocks. 

Here's the image to be displayed on hover:

Thanks

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

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 

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 

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

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

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

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

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?

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 

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
}

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 🙌

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?

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

Hi the code is not working for me. Does it not work anymore? I'd like to have my images on hover (on store pages) to not show the next photo. 

I have this code in both custom css for entire site and for the page but neither seems to do anything. If anyone could please help?

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
}

https://www.blakedebock.com/fineart

On 4/13/2024 at 6:46 AM, blakedebock said:

Hi the code is not working for me. Does it not work anymore? I'd like to have my images on hover (on store pages) to not show the next photo. 

 

I have this code in both custom css for entire site and for the page but neither seems to do anything. If anyone could please help?

 

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
}

 

 

 

https://www.blakedebock.com/fineart

You can use this CSS code

img.grid-item-image.grid-image-cover {
    opacity: 1 !important;
}
img.grid-item-image.grid-item-additional-image {
    opacity: 0 !important;
}
img.grid-item-image.grid-image-hover {
    opacity: 0 !important;
}