blurred borders on images
Hi, i'd like to create this effect, is there an easy way to do it with css?
The borders of the image is blurred
23 Replies
looks like 2 same images on top of each other and the bigger one is blurred
https://codepen.io/MannixMD/pen/jOxoJZx
the outside border should have straight lines
like no blurred edge
can you link to this
yeah it's a design
Ontwerp Weckx-Racing
8 Screens, Last modified on Sep 26, 2022 08:05 GMT
first page
i guess you could blur the image in photoshop
right now i can't see this be done with just css
yeah it really is complicated
but thanks for helping :p
i think i did it check the pen
oh
oh nice
thanks
it's 3 images not 2 🤣
with a lot of clippath points
https://codepen.io/MarkBoots/pen/jOxoRbX
noice Mark 😄
i was hoping to manage it with only 1 image, but can't think of a way
maybe with svg filters, but that's not my cup of tea
that clip path is insane xD
with mask-image it is a "bit" more readable/predictable
https://codepen.io/MarkBoots/pen/MWGdRvg
backup image (pen will be removed in few days)
how did you make this clip path?
with my mind 🙂
a polygon is made with x,y positions and each point separated with a comma
first i go around the whole image, then i shift inwards with the size of the border and go back the other way around (with the border-size in mind)
ive put some comments in the pen, so you can see
ah i see, thanks!
unless i'm missing something wouldn't a
clip-path: inset(2rem); on the top image do the same thing? https://codepen.io/jsnkuhn/pen/qBYGzgdthe outer edge will still be blurred outside.
but with an overflow hidden on the parent that will work too yes. good call
other thought is the first img should probably get a
aria-hidden=true to hide it from screen readers