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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, 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.