Mask Hover

Product Design

Animation

Creative Direction

How it works

Mask Hover is a nestable element with 2 additional nestable blocks: Content and Mask Content. You can place any content you want at them.
Visible content must be placed at “Content” element.
Content to display on hover must be placed at “Mask content” element.

Animation controls

Type: determines where the mask will come from: center, top or bottom. The demo is from center.
Duration
CSS easing: you can set any custom CSS easing of your own. Learn more about CSS easings here.

– Tamu

On this page