Hover Effect for Product Images in Shop Pages

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

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

Ah, this looks unreal! Thank you so much!

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)

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

https://solfaxi.squarespace.com/shop

pw: eques1234

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

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

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

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

@plantshop203 you want to add a border or add dark overlay when hovering?

@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

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