Remove Product Image Hover Effect in 7.1

Site URL: https://parrot-halibut-yhb8.squarespace.com/shop

Hello! I'm trying to remove the hover effect from the product images on my shop page but I can't seem to do so with the generic settings. When you hover over the product image the second product image appears if there is more than one image uploaded for the product. Is there a way to remove it? Thank you in advance!

Your site is private. Please setup password & share url

I'm having the same issue. Any updates on fixes to remove product image hover effect in 7.1

Hi, yes same issue here with my 7.1 migration. The last step needed!

Same issue right here!

On 2/26/2020 at 4:32 PM, tuanphan said:

Your site is private. Please setup password & share url

Here's mine:

https://parrot-panda-pyh6.squarespace.com/config/pages/5eb5e9b6d5c9220ce0add0e9

pass: Hi

On 3/12/2020 at 1:47 AM, Jared said:

I'm having the same issue. Any updates on fixes to remove product image hover effect in 7.1

On 4/17/2020 at 1:34 AM, FoxholeSpirits said:

Hi, yes same issue here with my 7.1 migration. The last step needed!

8 hours ago, avoug said:

Same issue right here!

Add to Home > Design > Custom CSS

.products.collection-content-wrapper .grid-image-hover {
    opacity: 0 !important;
}

19 hours ago, tuanphan said:

 

 

Add to Home > Design > Custom CSS

.products.collection-content-wrapper .grid-image-hover {
    opacity: 0 !important;
}

 

Thank you for your help! 

Is there a way to keep the first photo from disappearing? 

Rn the opacity of the second photo is set to 0, but it still tries to switch from image 1 to 2.

Thank you

4 hours ago, avoug said:

Thank you for your help! 

Is there a way to keep the first photo from disappearing? 

Rn the opacity of the second photo is set to 0, but it still tries to switch from image 1 to 2.

 

Thank you

Untitled.mov

Add this to Home > Design > Custom CSS

.products.collection-content-wrapper .grid-image-hover {
    opacity: 0 !important;
}
.products.collection-content-wrapper .grid-image-cover {
    opacity: 1 !important;
}

This should NOT be the default!

It's a bad user experience feature, and it shouldn't be the default only mendable via custom css. Please @SQUARESPACE fix this feature !!

On 5/10/2020 at 1:37 AM, tuanphan said:

.products.collection-content-wrapper .grid-image-hover { opacity: 0 !important;

On 7/15/2020 at 8:15 AM, celine said:

This should NOT be the default!

It's a bad user experience feature, and it shouldn't be the default only mendable via custom css. Please @SQUARESPACE fix this feature !!

totally agree!! @tuanphan thank you for the fix! You're my hero.

is there any way to add that the image gets a little bigger when you hover over it, like it zooms in instead of switching the image/doing nothing?

On 11/9/2021 at 9:58 PM, NeverEndingMetea said:

is there any way to add that the image gets a little bigger when you hover over it, like it zooms in instead of switching the image/doing nothing?

Yes. Possible. Can you share link to page where you want tho apply this? We can help easier

I was having an issue with the zoomed product image appearing blurry. SS customer care told me is was a browser issue and it wasn't happening on their end. But after trying different browsers, and incognito window, it still happens to me. I'm on mac mojave- maybe that's it? I ended up disabling the zoom feature by editing site styles –> product items –> click action (changed to lightbox instead of zoom). But the jury is still out on why the zoom image appears blurry on my end, but not on SS's end. I attached a screen grab of the zoomed image.

On 11/16/2021 at 11:41 PM, DCH said:

I was having an issue with the zoomed product image appearing blurry. SS customer care told me is was a browser issue and it wasn't happening on their end. But after trying different browsers, and incognito window, it still happens to me. I'm on mac mojave- maybe that's it? I ended up disabling the zoom feature by editing site styles –> product items –> click action (changed to lightbox instead of zoom). But the jury is still out on why the zoom image appears blurry on my end, but not on SS's end. I attached a screen grab of the zoomed image.

Can you share link to page in screenshot?

I used this to get rid of the default rollover action

.products.collection-content-wrapper .grid-image-hover {
    opacity: 0 !important;
}
.products.collection-content-wrapper .grid-image-cover {
    opacity: 1 !important;
}

Now I am trying to figure out a way to get a highlight rollover action like in this site:

https://www.jennawebbart.com/paintings

My squarespace shop page (password: potato) looks like this currently:

https://www.erikobanion.com/shop

10 hours ago, eobanion said:

I used this to get rid of the default rollover action

.products.collection-content-wrapper .grid-image-hover {
    opacity: 0 !important;
}
.products.collection-content-wrapper .grid-image-cover {
    opacity: 1 !important;
}

Now I am trying to figure out a way to get a highlight rollover action like in this site:

https://www.jennawebbart.com/paintings

My squarespace shop page (password: potato) looks like this currently:

https://www.erikobanion.com/shop

You mean hover image >> show a white overlay?

On 3/16/2022 at 2:28 AM, tuanphan said:

You mean hover image >> show a white overlay?

Yes please! I would like a washed white overlay when I hover and have the item name and price show while hovering.

6 hours ago, GFN said:

Yes please! I would like a washed white overlay when I hover and have the item name and price show while hovering.

Add to Design > Custom CSS

/* Shop Page - Show overlay title price on hover */
.products.collection-content-wrapper .list-grid .grid-item .grid-image:after {
    content: "";
    background-color: rgba(255,255,255,0.75);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}
section.grid-meta-wrapper {
    position: absolute !important;
    top: 50%;
    left: 50%;
    width: 100%;
    transform: translate(-50%,-50%);
    justify-content: center !important;
    opacity: 0;
    pointer-events: none;
}
section.grid-meta-wrapper * {
    text-align: center !important;
}
.grid-item:hover .grid-image:after {
    opacity: 1 !important;
}
.grid-item:hover .grid-meta-wrapper {
    opacity: 1;
}

On 4/1/2022 at 11:31 PM, tuanphan said:

Add to Design > Custom CSS

/* Shop Page - Show overlay title price on hover */
.products.collection-content-wrapper .list-grid .grid-item .grid-image:after {
    content: "";
    background-color: rgba(255,255,255,0.75);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}
section.grid-meta-wrapper {
    position: absolute !important;
    top: 50%;
    left: 50%;
    width: 100%;
    transform: translate(-50%,-50%);
    justify-content: center !important;
    opacity: 0;
    pointer-events: none;
}
section.grid-meta-wrapper * {
    text-align: center !important;
}
.grid-item:hover .grid-image:after {
    opacity: 1 !important;
}
.grid-item:hover .grid-meta-wrapper {
    opacity: 1;
}

 

Thank you!! But is there any way to make the text only appear while hovering?

On 4/7/2022 at 4:52 AM, GFN said:

Thank you!! But is there any way to make the text only appear while hovering?

I think above code should do that. If it doesn't work, try this new code

/* Shop Page - Show overlay title price on hover */
.products.collection-content-wrapper .list-grid .grid-item .grid-image:after {
    content: "";
    background-color: rgba(255,255,255,0.75);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}
section.grid-meta-wrapper {
    position: absolute !important;
    top: 50%;
    left: 50%;
    width: 100%;
    transform: translate(-50%,-50%);
    justify-content: center !important;
    opacity: 0 !important;
    pointer-events: none;
}
section.grid-meta-wrapper * {
    text-align: center !important;
}
.grid-item:hover .grid-image:after {
    opacity: 1 !important;
}
.grid-item:hover .grid-meta-wrapper {
    opacity: 1 !important;
}

I was having the same issue, and there's a really simple solution that doesn't require any code or CSS:

Add the same image twice, as the first two images for your product (regardless of the variant).  You don't even have to have two copies of the image - you can just add the same one again from the library.    If the images are the same, you don't get a change to the second image (or if you do, there's no transition effect, so it's not noticeable).  

On 5/11/2020 at 9:23 AM, tuanphan said:

Add this to Home > Design > Custom CSS

.products.collection-content-wrapper .grid-image-hover {
    opacity: 0 !important;
}
.products.collection-content-wrapper .grid-image-cover {
    opacity: 1 !important;
}

 

Is it possible to apply this to only the Related products section?

9 hours ago, LukasMader said:

Is it possible to apply this to only the Related products section?

Yes. If you share link to a product, we can adjust class name for Related products

On 5/22/2023 at 3:41 AM, tuanphan said:

Yes. If you share link to a product, we can adjust class name for Related products

Just share the link like this: https://ateliermateus.squarespace.com/store/p/sucupira-side-table ?