Jump to content

Hover Effect for Product Images in Shop Pages

Recommended Posts

Site URL: https://www.endofanear.com/

Hello,

How I can I implement a black 3px border when hovering over product images on the shop page?
I just can't figure out the code on Squarespace.

Also, how might I be able to add a small drop shadow to  product images, as well?


There's a whole bunch of different shop pages, but here's one: https://www.endofanear.com/jazz

Thanks! 🗿

Edited by robertwyatt
Link to comment

You can try this custom css

.post-type-store-item .grid-image {
  -webkit-box-shadow: 6px 9px 14px -5px rgba(0,0,0,0.75);
  -moz-box-shadow: 6px 9px 14px -5px rgba(0,0,0,0.75);
  box-shadow: 6px 9px 14px -5px rgba(0,0,0,0.75);
  
}
.post-type-store-item:hover .grid-image {
  border: 3px solid #000;
  box-sizing: border-box;
}

image.png.3a453fe994f5e8cafd5dd062868d2b23.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
  • 3 weeks later...
19 minutes ago, yh3 said:

This feature looks awesome! Is there a way to use it without making each product "pop" forward when hovering over it? So just having the black border appear without any other effects (I was able to remove the shadow)

what is your site url

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
2 hours ago, yh3 said:

https://solfaxi.squarespace.com/shop

 

pw: eques1234

 

also is there a way to make the border surround the product image AND text/description?

.post-type-store-item:after {
 position: absolute;
  width: 100%;
  height: 100%;
  content: '';
  top: 0;
  left: 0;
  
}
.post-type-store-item {
  padding: 7px;
}
.post-type-store-item:hover:after {
  border: 2px solid #000;
  box-sizing: border-box;
}

image.png.bb725a6d3c723b95b1ad947921001fa0.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
  • 2 months later...

 

On 12/7/2020 at 8:26 PM, bangank36 said:

.post-type-store-item:after {
 position: absolute;
  width: 100%;
  height: 100%;
  content: '';
  top: 0;
  left: 0;
  
}
.post-type-store-item {
  padding: 7px;
}
.post-type-store-item:hover:after {
  border: 2px solid #000;
  box-sizing: border-box;
}

image.png.bb725a6d3c723b95b1ad947921001fa0.png

Hi – this code looks great but when added, it removes the link from each of the products. So the border hover effect happens, but the products are not clickable. Is there a fix for this?

site: theoldyew.com

Link to comment

@tuanphan ok... update here:

Using this code I have created the desired effect:

.post-type-store-item:hover {
  position: absolute;
  width: 100%;
  height: 100%;
  content: '';
  top: 0;
  left: 0;
  border: 1px solid #bcbec0;
  box-sizing: border-box;
  padding: 7px!important;
  -webkit-box-shadow: 4px 4px 4px -4px  rgba(0,0,0,0.75);
  -moz-box-shadow: 4px 4px 4px -4px  rgba(0,0,0,0.75);
  box-shadow: 4px 4px 4px -4px rgba(0,0,0,0.75);
}

.post-type-store-item {
  padding: 7px;
}

See the first photo. The hover effect works great on the product list pages, but I am having a code issue on the product detail pages. See the second image.

Any way to stop this from happening?

https://pear-keyboard-jh2w.squarespace.com/shop/p/succulent-rock-garden

 

Desired Effect.jpg

Problem on Product Details Page.jpg

Link to comment

I was able to figure it out!

For anyone who wants to do something like this, here's the code I used:

//product hover border
.grid-item:hover {
  position: absolute;
  width: 100%;
  height: 100%;
  content: '';
  top: 0;
  left: 0;  
  box-sizing: border-box;
  padding: 7px!important;
  -webkit-box-shadow: 0px 0px 6px -3px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 0px 6px -3px rgba(0,0,0,0.75);
  box-shadow: 0px 0px 6px -3px rgba(0,0,0,0.75);
}

.grid-item {
  padding: 7px;
}

 

Edited by plantshop203
Link to comment
  • 1 year later...
  • 8 months later...
On 7/20/2023 at 4:20 PM, LOS_099 said:

hi guys, love this code! but i have noticed when i click on a product and scroll down to the "you might also like" section all of the products get highlighted at once. how do i change this? here is a photo as well.

Screenshot 2023-07-20 at 10.20.14.png

If you share link to a product, 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

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

Link to comment
15 hours ago, LOS_099 said:

Add to Design > Custom CSS

section.ProductItem-additional+section .post-type-store-item .grid-image {
    border: none !important;
}

 

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.