Circular Mask reveal between 2 images

Elements
1

Hi all,
I am hoping someone will be able to help me out.

I am trying to create a mask that follows my mouse and reveals part of the top image only:

I have 2 images that are both the same size overlayed as layers.
Top layer - is a coloured photo.
Bottom layer - is the same photo but black and white.

I am trying to create a mask of the Top layer (coloured photo) by grouping it and changing the overflow to hidden. I have rounded the border radius to create a circle mask.

I have added custom javascript to follow the mouseX and Y on drag (I thought custom JS over the on drag>control element position would provide more possibilities).

This works great! BUT (always a but) I need the Coloured image that is inside the mast to stay static. At the moment it is getting caught up in the dragging of its parent Group.

I have attached the file, if anyone can help that would be amazing…

2

hi,

there are few threads on this topic in the forum. this is one of them: Image masking with Hype (with Android support)

this may also work: css_clipPath.hype.zip (1.1 MB)

2 Likes
3

Hi @h_classen thanks so much for your quick response.
I am looking through your example and it is perfect. I have learned a lot from going over this.

I will also check out the other examples in the forum.

Thanks again.

1 Like