CSS Mask Xray Effect

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!!

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.

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…

have a look at

A quick adaption from above ( just changed the images )

xray.hype.zip (218.8 KB)

Thanks @MarkHunte This looks great!

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.


just another approach …