Reveal an image over another image (like a mask)

Hi,
I would like to achive this interaction:

I don´t now how to move the div that I would use as a mask withoyt moving the image inside.

Thanks for your help

Hi Andres,

I would suggest creating a parent “div”. Make it a flex box and position content center. Set its positioning to relative.

Create another div inside, then either put the picture as the background or create an image inside of that div. Use the picture you want as a base (so the first picture shown in the example above). Set the “z” value to 0.
(Absolute Positioning | Webflow University) This is the lesson about absolute positioning. Worth getting to know about positioning as it will help you a lot with the layout side of things.

lastly. Create another div inside the parent div and set its position to absolute. This should give you one image in front of the other. Again either set the overlay image as background or put an image element inside. Set this div “z” value to 1.

You can add animations etc to this structure. That’s how I would approach your problem.

I have outlined the a very basic version here. But get to know about positioning, flexbox and grid etc, z values, elements and animations then you find this problem a breeze. Here is a link to the university lessons: Web design lessons | Webflow University.

Good luck :slight_smile:

Thank you very much @notmyrealname , I will check it. Thanks.