Jump to content

Remove Product Image Hover Effect in 7.1

Recommended Posts

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!

 

Edited by bdenis16
Incorrect attachment.
Link to comment
  • 2 weeks later...
  • 1 month later...
  • 4 weeks later...
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;
}

 

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

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

 

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 months later...
  • 6 months later...
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.

 

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

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

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.

Screen Shot 2021-11-16 at 9.52.03 AM.png

Edited by DCH
Link to comment
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.

Screen Shot 2021-11-16 at 9.52.03 AM.png

Can you share link to page in screenshot?

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 months later...

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

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

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

 

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 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?

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

 

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 months later...

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).  

Hoever image workaround.png

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.