Jump to content

Apply border and other css effects to image shapes

Recommended Posts

  • 4 weeks later...

image shapes use clip paths (imagine cutting a hole in a piece of paper and laying it over the top of your image), so the drop shadows that you apply won't be visible as they are outside of the clipped area. CSS box-shadow rules don't get applied after clip-path rendering so you wont' get the outline you want, but what you can do is use the "filter" rule as this happens later in the order of operations. you have to apply it to a parent element though as the image clip path will still try to clip the shadows.

The best bet as far as I can see is to target the parent "figure" element to the image and use a drop-shadow filter, e.g.

#block-yui_3_17_2_1_1635215334828_29269 figure {
filter: drop-shadow(-1px 6px 3px rgba(50, 50, 0, 0.5));

this approach is noted here



Edited by iamdavehart

Dave Hart. Software/Technology Consultant living in London. buymeacoffee 

Link to comment

Unfortunately, there's probably only a "sort of" explanation because of the way that clip-path's work...

To apply it to all image blocks automatically, change the section id selector to a class selector that targets image blocks

.sqs-block.image-block figure {
 // insert your drop shadow filters here

to do the border, you could try assigning two drop shadow filters, the first one having no offset and just a 1 px spread to draw your border and the second one drawing your drop shadow

e.g. this will draw a red border and a drop shadow on figures in image blocks

.sqs-block.image-block figure {
filter: drop-shadow(0px 0px 1px rgba(255,0,0,1)) drop-shadow(-1px 6px 3px rgba(50, 50, 0, 0.5)) ;

Maybe that will work for you. Your options are a little limited here though as I said, which isn't really a squarespace feature/bug, just a side effect of CSS clip paths

Hope that helps

Dave Hart. Software/Technology Consultant living in London. buymeacoffee 

Link to comment
On 12/13/2021 at 7:12 AM, pearler1570048501 said:

Thanks, @iamdavehart Yeah it's a tricky one! Unfortunately it applies to all elements of the image block:


Screen Shot 2021-12-13 at 11.10.38 am.png

Try change to this class name


.sqs-block.image-block .intrinsic


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
  • 1 year later...
  • 11 months later...
On 4/14/2023 at 12:01 AM, GeorgiaDigital said:

Hi all - I am trying to implement this same effect on a fluid engine site however this code does not seem to be working and I cannot workout which css selectors I should be using. Does anyone know how this could be implemented to an image shape on fluid engine?

I'm also looking for this, all the codes i've tried seem to be outdated and are not working! 




Edited by moonlitdesign
adding in the URL
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.