Image Effects

A clip-path inset mask uncovers the photograph from the bottom edge upward. Nothing moves and no layout property is touched — only the painted region changes.

clip-path inset · no layout animation

A slow cinematic scale settles the image back to its true size, the way a lens finds focus. The frame crops the overscaled start so no edge is ever exposed.

transform scale only

A controlled pan across an oversized image inside a fixed crop. Both axes are independently tunable, and the travel can be reversed by using a negative value.

oversized layer · fixed crop

The image drifts within its overflow-hidden frame while the frame itself stays put — the same principle as scroll parallax, driven here by a replayable timeline.

drift inside the crop

An animated clip-path transition from a centred inset to the full frame, opening the image from the middle outward on both axes at once.

centre-out aperture

Two decorative panels part from the centre line to expose the photograph. Replay closes them first, so the opening always plays from the beginning.

symmetric wipe

A hover zoom for fine-pointer devices. Replay plays the same zoom as a one-shot, so the effect is demonstrable on touch where there is no hover at all.

hover on fine pointers · Replay elsewhere

The frame tilts toward the pointer in 3D within a perspective context. On touch devices the image simply sits flat and square — there is no hidden state.

rotationX / rotationY · flat on touch

A restrained rotation follows the pointer's horizontal position. The angle is deliberately small so the photograph never reads as a novelty spinner.

bounded angle · static on touch

The photograph resolves from blurred to sharp by animating the CSS filter. Filter work is GPU-assisted and never disturbs the text beneath it.

filter blur · no layout cost

A CSS-only displacement illusion: skew, scale and a saturation shift combine so the frame appears to warp. No WebGL and no shader — transforms and filters only.

skew · scale · saturate

Three stacked cards fan out into a spread. Each card keeps its own alt text, so the stack is a set of real photographs rather than a decorative flourish.

three cards · one grid cell

Six thumbnails enter in sequence from a single staggered tween. One tween drives every cell, so the cascade stays perfectly even.

one staggered tween · six cells

Two supplied photographs trade places through opacity alone. Both remain in the document with their own alt text, so neither is hidden from assistive technology.

opacity only · both images kept

A before/after style wipe: the upper photograph's clip-path slides across to expose the one beneath, with a thin guide marking the boundary.

animated clip-path boundary

A small decorative thumbnail trails the pointer across the frame. It is aria-hidden and carries no information, and on touch devices it is never created at all.

decorative · fine pointers only

Each label carries its own visible thumbnail, so the information is never hover-dependent. On a fine pointer an enlarged preview additionally tracks the cursor.

• Compliance
• Risk
• Operations

labels readable without hovering