CSS Mask Xray Effect

1

Really like this CSS mask effect that you can see in this pen: https://codepen.io/erikrahm/pen/ywrmH

I see that it requires Jquery but I don’t quite know where to place the CSS.

I can upload images equivalent to, and name them “flesh” and “bone” within Hype itself, but if I did that, I’m not sure how I would adjust the CSS…

Any help would be great!!

2

I’m not at my Mac right now, but it seems like this effect could be reproduced in Hype. It’s just three main pieces…

  • Background
  • circle
  • Image in circle

So, on click / tap, the circle is moved and the image in the circle is moved too.

I’m not entirely sure, but if the “drag controls timeline” option is used, custom JavaScript or third-party libraries might be unnecessary.

3

Thanks @Photics, but that would work only if the “drag controls timeline” was set to an animation in a specified line / direction of movement - correct? But the example (and effect I am trying to achieve) shows a freeform drag object under which the image would have to change, in any direction…

4

have a look at

A quick adaption from above ( just changed the images )

xray.hype.zip (218.8 KB)

5

Thanks @MarkHunte This looks great!

6

Problem seems solved. Once again, I’m not at my Mac, but I suspect two drag actions and two timelines would be used… one horizontal, one vertical… to get four-way movement.

7

just another approach ...