Apply border and other css effects to image shapes

Site URL: https://cosmotemplate.squarespace.com/?password=pearler

I'd like to apply a border and shadow to an image. I'm utilising the new image shape feature, and can't seem to figure out which element to target. Thank you!

You mean girl image or 3 logos under Listen?

@tuanphan Yes the image of the girl has a shape effect applied to it. I'd like to apply a border and shadow to it. I've tried various CSS selectors, but the border appears wrong.

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

https://css-tricks.com/using-box-shadows-and-clip-path-together/

Thanks, @iamdavehart - this works sort of. However, to add a layer of complexity, I want this effect to apply to all image blocks automatically without having to identify each #block-yui

Also, when I use the code above, it works for the drop shadow but not for the border!

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

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

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:

 

Try change to this class name

Quote

.sqs-block.image-block .intrinsic

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?

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! 

www.moonlitdesign.uk/design-services

On 3/16/2024 at 1:51 AM, moonlitdesign said:

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

 

 

www.moonlitdesign.uk/design-services

You mean add border to this image?

2 hours ago, tuanphan said:

You mean add border to this image?

yes please that would be amazing ! @tuanphan