Image "crop" Calculator

Given a source image, generates the markup necessary to "crop" part of the image, which can then be animated. See the zoom-crop demo to see how to do the animation.

Drag/drop an image below

Drag to select an area to "crop", drag from a corner to adjust. Use shift-key to force a 1:1 aspect ratio.

Options

Output Preview

Image Markup

HTML:

CSS:

HTML:

CSS: