Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Hover Effect for Product Images in Shop Pages


robertwyatt

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 post
  • Replies 10
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Popular Posts

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

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 9

Ah, this looks unreal! Thank you so much!

Posted Images

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 BaNgan from 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, 360 degree photo blockSortable Table from GSheet
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 post
  • 3 weeks later...

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)

Edited by yh3
additional info
Link to post
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 BaNgan from 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, 360 degree photo blockSortable Table from GSheet
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 post
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 BaNgan from 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, 360 degree photo blockSortable Table from GSheet
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 post
  • 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 post

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

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 post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...