Discover the best imagemasking websites created by professional designers. Get inspired and start planning your perfect imagemasking web design today!

A simple custom code to mask image from text

clone and enjoy

Image into text (Text masking)

Image into text (Text Masking)

Here's a free-to-use page transition using a snippet of custom piece of code to allow for the animation to happen.

This project was created as part of Webflow Copenhagen's MeetUp #4.

//

Watch the recording of the MeetUp here where we go over how to make page transitions like this
https://webflow.zoom.us/rec/share/39RzFLWq7F5LEpHKxFHuA_4kHoPGeaa8hHQd-aAKyUuAQLwFkxzwpEUdvrwxQYZ4

//

Created by Emil Villumsen
https://twitter.com/EmilVillumsen

//

MeetUp group 
https://www.meetup.com/Copenhagen-Webflow-Meetup/    

//

Design reference
https://vedran-badun.com

Staggered page transition

Staggered Page transition | Webflow CPH #4

Shapemaker®

A new splashpage for our digital division, Polygram. The digital studio for emerging brands.

Polygram

polygram

An interactive clipping mask using a little code snippet within the page <head> tag. Try it out!

Text + Image Masking

Interactive Clipping Mask

Popular masking effect on scroll.

It's not natively possible in Webflow, so be sure to check the Custom CSS embed element in the project and customise as you like.

Clip rect

Masking scroll effect using Clip-rect

I recently experienced the best day of my life - my wedding day. As a web designer, I knew I wanted to do better than the traditional "Knot.com" website with basic template design.

I build this site using a gradient video and clipping masks. So, the text is not real, it is all an image, but I made them in Canva, so it wouldn't be difficult to change.

Also, I wasn't worried about SEO for this site because only the people we send our invitations to will see it through our QR code.

Discover imagemasking websites built by the Webflow community

Discover imagemasking websites built by the Webflow community