Streaming live at 10am (PST)

Clipping masks over image

Hi @PixelGeek :wave:,

How do I use Webflow divs as multiple clipping-masks to reveal parts of one image?

For example, this website (https://r-building.com.ua/en) reveals a building through multiple clipping-masks.

How would I do it in Webflow? I need the image to only show through the white rectangles.

so it looks like this:

Look forward to hearing from you!

Thanks!
Roarke

Whattup Ship!

You can make the rectangles into one SVG, insert the image as a pattern, and fill the SVG with the pattern. Here’s a tut with a few more options: https://css-tricks.com/masking-vs-clipping-use/

Hey I took a look at what r-building.com was doing and they’re loading the same image in three times into three different DIVs with different background positioning and size. Not the most resourceful way but it gets the job done.