Go back

Go to clg.name →

Q: What's this all about?

A: This is an experiment combining some new CSS properties and JS events with photography. Layers of the exposure are blended together in the browser using the mix-blend-mode property. These layers are then trimmed to the silhouette with the mask-image property.

Devices

If you're visiting on a device with a cursor, the exposure will react to mouseovers. This is probably the ideal device type to view this experiment with. The cursor coordinates are used to apply transforms (translations and rotations) across the layers of the exposure.

If you're visiting on a device with an accelerometer — e.g. a smartphone — you'll see the exposure react to the device tilting and panning. The deviceorientation event sends down the beta and gamma orientation, which is then adjusted and applied as transforms (translations) across the layers of the exposure.

@supports

Browsers that don't support CSS masking or blend modes will load a static backup image instead.

Plugs

Check out my Instagram @clg_aus for more photography or http://clg.name for more web stuff.