How do I add a drop shadow for only specific images

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!

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

Oh god, it was really that simple!? I don't know how I spent hours trying to figure this out 

Many thanks Derrick!

Is it possible to use that for store / product photos as well? I tried but it doesn't work

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

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.

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!

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

Hi  I'm working on updating our home page and would like to add drop shadows on images in one section of the page 

I've added custom css as suggested above - duplicating with individual ids for each image but the drop shadow isn't showing on any of the images...   this is the page www.meditateinthewestmidlands.co.uk/home-1-1

This is the css I added;

[data-image-id="abcf5ec84a91eb626997"]
 { filter: drop-shadow(5px 5px 8px #000000); 
} 
[data-image-id="d8220f846facaecb42e2"]
 { filter: drop-shadow(5px 5px 8px #000000); 
}
[data-image-id="063164624656d7570e28"]
 { filter: drop-shadow(5px 5px 8px #000000); 
}
[data-image-id="5e2dd5887582e1f67243"]
 { filter: drop-shadow(5px 5px 8px #000000); 
}
[data-image-id="3378acdf01847afaab8f"]
 { filter: drop-shadow(5px 5px 8px #000000); 
}
[data-image-id="6f121f7a8728a210015a"]
 { filter: drop-shadow(5px 5px 8px #000000); 
} 

I'm probably missing something?

Is it possible to add css code that isolates a section on a particular page and adds drop shadows to all the images in that section only?

Any help with this would be great, thank you!

Mandy

On 10/8/2023 at 9:56 PM, Khechog said:

Hi  I'm working on updating our home page and would like to add drop shadows on images in one section of the page 

I've added custom css as suggested above - duplicating with individual ids for each image but the drop shadow isn't showing on any of the images...   this is the page www.meditateinthewestmidlands.co.uk/home-1-1

This is the css I added;

[data-image-id="abcf5ec84a91eb626997"]
 { filter: drop-shadow(5px 5px 8px #000000); 
} 
[data-image-id="d8220f846facaecb42e2"]
 { filter: drop-shadow(5px 5px 8px #000000); 
}
[data-image-id="063164624656d7570e28"]
 { filter: drop-shadow(5px 5px 8px #000000); 
}
[data-image-id="5e2dd5887582e1f67243"]
 { filter: drop-shadow(5px 5px 8px #000000); 
}
[data-image-id="3378acdf01847afaab8f"]
 { filter: drop-shadow(5px 5px 8px #000000); 
}
[data-image-id="6f121f7a8728a210015a"]
 { filter: drop-shadow(5px 5px 8px #000000); 
} 

I'm probably missing something?

Is it possible to add css code that isolates a section on a particular page and adds drop shadows to all the images in that section only?

Any help with this would be great, thank you!

Mandy

Can you share link to page?