Clipping masks over image

[ShipStud (Roarke)]

Hi @PixelGeek ,

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

For example, this website (R-building Co. - a reliable developer in the Kiev region, engaged in the construction of residential complexes in Bucha) 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

[DesignByDre (Andre Guerra)]

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: Masking vs. Clipping: When to Use Each | CSS-Tricks - CSS-Tricks

[DesignByDre (Andre Guerra)]

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.