Jump to content

How do I add a drop shadow for only specific images

Recommended Posts

Hi Folks

I'm looking to add a simple drop shadow on certain images contained in an image card block. 

When I enter generic CSS code it changes ALL the images on the page to have a drop shadow, which I don't want, I just want to isolate some specific images for a drop shadow. 

Any help hugely appreciated!

Link to comment

You have to target the block, instead of the general element. You can find the block with a chrome plug in. 

https://chrome.google.com/webstore/detail/squarespace-collectionblo/bggpdfnccodbnmcndckmeehdjkjojkde?hl=en-US#:~:text=Squarespace Collection%2FBlock Identifier&text=This extension makes it easy,the ID to your clipboard. So the code would look something like this with your unique id on the first line:

[data-image-id="548969e9e4b05708750ebe59"]
 { filter: drop-shadow(5px 5px 8px #000000); 
} 

 

Edited by derricksrandomviews
Link to comment
  • 4 months later...
On 12/15/2020 at 6:22 PM, TobiasM said:

Ah, it worked, but now it also drop shadows the text. is it possible to do it only for the pic?

 

Can you share link to product page? We can give the exactly code.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 7 months later...

Hi there! I am having the same issue. I followed what it is explained here and it worked but it also dropped shadows on the text. Is there any way of having drop-shadows only in the picture not in the text? I would like to do that for around 30 pictures on my website, but not for all the pictures on it.

Any ideas will be welcome! Thank you so much!

 

Link to comment
On 8/6/2021 at 7:34 PM, Aidus said:

Hi there! I am having the same issue. I followed what it is explained here and it worked but it also dropped shadows on the text. Is there any way of having drop-shadows only in the picture not in the text? I would like to do that for around 30 pictures on my website, but not for all the pictures on it.

Any ideas will be welcome! Thank you so much!

 

Can you share link to a page where you added the code? We can take a look

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.