Jump to content

7.1 - Applying CSS shadows to specific images

Recommended Posts

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!

 

 

Link to comment
  • Replies 5
  • Views 2.4k
  • Created
  • Last Reply
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

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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

Link to comment

Archived

This topic is now archived and is closed to further replies.

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