Jump to content

How to target certain images to add a box shadow?

Recommended Posts

Site URL: https://chinchilla-dragonfly-h3f6.squarespace.com/

Hi,

I'm going to be using this layout a lot across a site I'm building.

image.thumb.png.10ac2e411e1fc854b9b4372b07ea5c27.png

At present the blue 'box shadow' behind the image is targeted using...

#block-yui_3_17_2_1_1647517012130_16946 .image-block-wrapper {my css code inserted here}

As this is going to appear several times per page AND on dozens of pages, I would like to be able to apply a class to just the images where the effect should appear.  If I apply the box shadow to simply .image-block-wrapper it (of course) gives every image across the site the effect.

How can I assign or add a class to just the images I want the effect to appear on?  Coming from a html / css / Bootstrap background this would seem simple but I cannot work it out.

Edited by nickhyatt
sent before finishing
Link to comment
18 minutes ago, nickhyatt said:

Site URL: https://chinchilla-dragonfly-h3f6.squarespace.com/

Hi,

I'm going to be using this layout a lot across a site I'm building.

image.thumb.png.10ac2e411e1fc854b9b4372b07ea5c27.png

At present the blue 'box shadow' behind the image is targeted using...

#block-yui_3_17_2_1_1647517012130_16946 .image-block-wrapper {my css code inserted here}

As this is going to appear several times per page AND on dozens of pages, I would like to be able to apply a class to just the images where the effect should appear.  If I apply the box shadow to simply .image-block-wrapper it (of course) gives every image across the site the effect.

How can I assign or add a class to just the images I want the effect to appear on?  Coming from a html / css / Bootstrap background this would seem simple but I cannot work it out.

I think we can set a code block with a general class before every image you want to target, after that we can select the next images block after these code blocks

Hope that it makes sense

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

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.