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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, 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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, 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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, 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...

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.