Made this sprite animation on button with hover effect for triggering the frame's , inspired by this codrop article https://tympanus.net/codrops/2016/09/29/transition-effect-with-css-masks/
Example of animating a CSS mask using 'clip-path' from HTML5Rocks | http://www.html5rocks.com/en/tutorials/masking/adobe/
Example of applying textures to elements using the mask-image property. Implemented on A New Hope for a New Wild.
Using a CSS Mask to reveal portions of an image overlaid on top of a background image. The "X-Ray" is moved by finding the position of the mouse cursor with jQuery.
with SVG and CSS masks.
Browser support: WebKit with fallback for Firefox
I made this page to collect different types of masks and to test how browsers support them. The winner is SVG : )
Based on Tympanus tutorial: http://tympanus.net/codrops/2016/09/29/transition-effect-with-css-masks/
CSS Mask with CSS gradients is not widely supported (yet) and this demo works only on webkit/blink browsers.
An example by Maria Antonietta Perna
Using CSS Masks to simulate a glowing border when the map intersects the box edges. Map and mask is SVG, border is PNG. Webkit only.
Need to know how to enable it? Go here.