Foolhat Focus Visualiser

This is a focus visualiser built to quickly show what an image will look like when cropped to different aspect ratios based on a focal point expressed as X and Y coordinates.

These coordinates are primarily intended to be used as values for CSS properties including background-position and object-position.

Usage

To use the visualiser, drag an image file onto the main box. Then drag the circular focal point picker over the image. The crop visualisations will update in real time.

Once happy with the focal point selected, copy the X and Y percentage values and use them in your CSS.