Jump to content

Drop shadows on product images for both, portrait and landscape in the store section

Recommended Posts

Site URL: https://www.kiriljuha.com/print-store

https://www.kiriljuha.com/print-store


Could anybody help with my shop? I'm a noobie when it comes to coding.

I have both Portrait and Landscape images with drop shadows + white borders (hover) at my shop.

This is the code I've used for the drop shadows=
 

Quote

 

.post-type-store-item .grid-image {
  -webkit-box-shadow: 6px 19px 14px -5px rgba(0,0,0,0.75);
  -moz-box-shadow: 6px 9px 14px -5px rgba(0,0,0,0.75);
  box-shadow: 7px 9px 14px -px rgba(0,0,0,0.75);
  
}

 

 

This is the code for the white borders (hover)=

Quote

.post-type-store-item:hover .grid-image {
  border: 7px solid #FFFFFF;
  box-sizing: border-box;
}

 

This is the code for the portrait photos to be in portrait mode, in the store. 

Quote

.products.collection-content-wrapper .grid-item .grid-image-cover { object-fit: contain !important; }

 

I'm looking for a code that would delete the landscape drop shadows on the portrait photos. And the code would make the drop shadows on the portrait photos, in a portrait mode. But still remaining the landscape drop shadows, in landscape photos. + White borders on hover on both styles.

Any help? I would really appreciate it.

2069847503_Screenshot2022-03-10at16_21_40.thumb.png.cd64ddec3b80d619e7d36e5d993fb5a2.png

Screenshot 2022-03-10 at 16.21.40.jpg

Edited by kiriljuha
url changed again
Link to comment
  • kiriljuha changed the title to Drop shadows on product images for both, portrait and landscape in the store section
  • Replies 3
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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.