Shadow Sweep

Shadow Sweep is a hover effect for photo cards. A card of colour takes over the photograph, but it reaches the picture's shadows before its highlights, so the image draws the edge of the sweep itself. It runs along a silhouette, a lapel or a curl differently on every photo, with a thin line of light on the edge.

The colour comes in from the side the pointer enters by. Leave by the far half and it drains off the far side, shadows first; leave by the near half and it goes back the way it came. Come back before it has gone and it turns round. On touch, a tap brings the card in and a second tap sends it off, or follows the card's link.

Everything lives in the properties panel: image, label, number and caption, card and text colours, three fonts, number size, padding, radius, the side it enters from, duration and ease, how far the shadows lead (0 gives a straight wipe), and the edge light and its colour. Set In Editor to Card to style the card on the canvas. The text is laid out with your fonts and stays readable for screen readers. Use one card or fill a whole grid: each card only holds a WebGL context while its colour is on screen, so a page can have as many as you like.

Good to know: the effect needs WebGL 2, and without it the card simply shows on hover. With reduced motion on, the card shows and hides at once. Photos with a clear subject on a light backdrop give the strongest edge.