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

7.1 - Applying CSS shadows to specific images


I've applied a css shadow to all of my in-page images. However, there are a few images that I don't want to have this shadow. Is this possible, and how can I achieve?

So far I've added this code to give all images shadows.

 .image-block-wrapper {
    box-shadow: -1px 2px 10px 4px rgba(0,0,0,.1);

I've been trying to target the image ID for the few images that I do not want to have a shadow:

#yui_3_17_2_1_1573606191721_472{    box-shadow: none !important;}

This is finicky. I can get it to work sometimes, but then upon saving the page and viewing in the browser the shadow is back. When I go back to check, it looks like the ID is different. Seems like there's not a static ID for each image. 

URL:  https://grape-tuatara-n6mp.squarespace.com/checking-accounts

P: sitehelp

If you scroll down on this checking page, I'm trying to remove the shadow from the image with 3 cell phones. 

Side note: I also have a shadow applied to cards on my homepage. Unsure if this effects anything. 

.sqs-block-image .image-block-outer-wrapper.image-block-v2 {
      box-shadow: -1px 2px 10px 4px rgba(0,0,0,.07);  

Please help!



Share this post

Link to post

5 answers to this question

Recommended Posts

  • 0
1 minute ago, jpwelchux said:

Any thoughts on this @tuanphan? You were a huge help on some prior questions I had. Thought it's worth a shot to ask directly. Thanks in advance!

try finding & target #page-id or #block_yui

You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

I'm overloading. Will reply all questions this month.

Share this post

Link to post
  • 0

@tuanphan thank you for the reply. I was not able to find either of the IDs you mentioned. However, I found an article

From that article I've came to some code like this:

#collection-5db780f898b12c452cebb868 #content div > div > div .image-block-wrapper:nth-child(4){
  box-shadow: box-shadow: -1px 2px 10px 4px rgba(0,0,0,1) ;

I was able to identify the pages #collection, but I haven't had any luck getting this to work. Any thoughts?

Share this post

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...