How can I achieve an inverted image effect for a specific area

Design help General
1

Hi everyone,

I found this on the internet lately and trying to understand how I can do something similar with webflow. Goal is to have a specific .png image with higher z-index over a regular image and make only the area created by the overlaying .png image invert the colors of the image in the lower z-index.

In the example link it is the image of the letter “W” that creates the inverted effect for the image under it.

Link below (my site).

Best,
Stefan

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

You can do that with Background Clipping. You’ll have one version of the image in the background, then over it you’ll have an element covering it with the b&w picture, and your objects you want to animate. You’ll use CSS background clipping so the bg clips at the objects edges, and you’ll be able to move the objects and keep the effect.

I started to gather those techniques on a page, it’s a draft : http://clipping-masking.webflow.io/

3

Vincent thanks a lot for this great help. May I ask you for further questions when I am trying it out tomorrow?

4

Yes. And I may have given you an incorrect answer.

Because I’m trying to animate it right now, and I can’t. Seems when it gets the clipping it’s baked in what the browser renders and it’'s no more animatable. I tried adding parents and animating them but no.

But there are many techniques I think to achieve this.

5

Thank you.

What else do you have in mind?

6

I checked, it’s simpler. He’s using a css property mix blend mode difference on an object that has a SVG inside and he animates it.

http://vincent.polenordstudio.fr/snap/75tu4.jpg

7

Thank you.

Can I completely recreate that with webflow then?

8

Yes. Here is a stylesheet to use on your page, with all the blending modes. That’s the one I use on my blog. You add it inside a custom code element in the page and then you add the classmnames to elements in the designer (mbm-name)

<style>
/* Blending modes */
.mbm-normal{mix-blend-mode: normal;}
.mbm-multiply{mix-blend-mode: multiply;}
.mbm-screen{mix-blend-mode: screen;}
.mbm-overlay{mix-blend-mode: overlay;}
.mbm-darken{mix-blend-mode: darken;}
.mbm-lighten{mix-blend-mode: lighten;}
.mbm-color-dodge{mix-blend-mode: color-dodge}
.mbm-color-burn{mix-blend-mode: color-burn;}
.mbm-hard-light{mix-blend-mode: hard-light;}
.mbm-soft-light{mix-blend-mode: soft-light;}
.mbm-difference{mix-blend-mode: difference;}
.mbm-exclusion{mix-blend-mode: exclusion;}
.mbm-hue{mix-blend-mode: hue;}
.mbm-saturation{mix-blend-mode: saturation;}
.mbm-color{mix-blend-mode: color;}
.mbm-luminosity{mix-blend-mode: luminosity;}
</style>

I added it to the mini site :

3 Likes
9

You can experiment with all the blend modes. And you can can pile them up. If you put difference on the bg and the foreground object, the clipped part will be normal and the bg inverted…

10

That is pretty amazing stuff.

I have sent you an email via your blog.