How to add complex image masking to website images with CSS clip-path and Figma

You may have seen image masks on sites like Abbotsford Convent or Creative Lives in Progress - of course you can prepare images manually but why not make it easy and flexible by letting CSS do the work! In this tutorial, Rik will show you how to add both simple and complex image masking by taking a Figma prepared SVG and implementing with CSS clip-path.
00:00 Intro
00:33 Basic mask shapes
03:26 Kylie alert
03:32 Complex mask shapes
15:30 Outro
Links:
abbotsfordconvent.com.au/
www.creativelivesinprogress.com/
Demo:
superhi-videos.s3.amazonaws.c...
Download:
superhi-videos.s3.amazonaws.c...
Photos by Agustín Farías on Death to Stock:
agustinfarias.com/

[@asifreza23]

Thank you so so so so so so so so so so so so so so so much!!!!

[@hellothere8547]

Your content of building websites effects from scratch is what brings me back! Great teacher and lessons. Thanks!

[@SuperHi]

Thank you! We have more videos coming, including one tomorrow, so keep watching and sharing!

[@bruhmoment3731]

Thank you so so so so so so so so so so so so so so so much!

[@pablocortes682]

This was awesome, thank you so much @SuperHi I never really understood the objectBoundingBox but now it all makes sense.

[@SuperHi]

Glad it helped! It's an incredibly versatile thing, isn't it?

[@pablocortes682]

@@SuperHi yes! so many cool options, the perfect example of how to create a big impact with a simple concept. Thanks again.

[@andreysivak6404]

awesome! thanks a lot!

[@jensv8859]

Legend!

[@njanadesign]

Tutorials that never disappoint! What if I was building in Webflow and using a CMS collection and want to randomise the clipping paths on all the collection items?

[@briannhinton]

Good title!

[@SuperHi]

I know, right? Thanks for your help on it btw! Ending up adding a bit of both options in!

[@growwithdesign]

im trying to put a shine effect on top of it when we hove on the image. doesn't work. Any thoughts?

[@andrewshannon]

Great tutorial! What's the reason you changed the ratio of the squiggle to 1:1 and reduced it's size to 1px x 1px in Figma?

[@SuperHi]

We just like tiny SVGs... not really, the real reason is that when we add objectBoundingBox, it's basing the clip on a 0-1 scale in the path and then scaling it up to fit, so essentially it's converting it to a percentage based system over a pixel based on when we add the objectBoundingBox so our SVG needs to match this system so it can scale with the image sizes

[@andrewshannon1169]

Thanks for explaining@@SuperHi. Is there a reason we change the aspect ration 1:1 when the image the mask is being placed over is not 1:1?

[@SuperHi]

@@andrewshannon1169 Think of the 1x1 as a percentage that's stretching over the image, so if something is at 0.9px across and 0.8px down, it would mask the final image at 90%, 80% co-ordinates. The aspect ratio of the 1x1 isn't fixed, it's stretchy so it depends on the final image's aspect ratio