\n\nThe `img-zoom` element represents an image that can be enlarged to fill the screen on demand.\n\n\n\n```html\n\n \n\n```\n\n## Installation\n\nYou can import through CDN:\n\n```html\n\n```\n\nOr, you may install through [NPM](https://www.npmjs.com/package/@auroratide/img-zoom) and include it as part of your build process:\n\n```\n$ npm i @auroratide/img-zoom\n```\n\n```javascript\nimport '@auroratide/img-zoom/lib/define.js'\n```\n\n## Usage\n\n`img-zoom` is an **inline markup element** that you can use in your HTML document. It must have _exactly one_ child which is either an `img` element or a `picture` element with a fallback `img` defined.\n\n**Using img:**\n\n```html\n\n \n\n```\n\n**Using picture:**\n\n```html\n\n \n \n \n \n\n```\n\n\n\n### Disabling Interaction\n\nThe `disabled` attribute disables zoom interaction. Not super sure if this is useful, but the feature's there just in case.\n\n```html\n\n \n\n```\n\n## Customization\n\nSince it's Just HTMLTM, you can use good ol' CSS.\n\n```css\nimg-zoom {\n\tbox-shadow: 0 0 0.5em 0.5em oklch(0% 0 0 / 0.33);\n}\n```\n\n## Accessibility\n\nThis custom element is built with accessibility in mind! It treats the zoomed image like a [dialog](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/).\n\n* Keyboard operation\n * When the image has focus, Enter will open the zoomed image.\n * When opened, focus is automatically placed on a Close button that will close the zoomed image.\n * Escape will also exit the zoomed image.\n* Tab trapping: While zoomed, the tabbing order will remain within the image until dismissed.\n* Reduced Motion: The animation is simplified for people who prefer reduced motion.\n","readmeFilename":"README.md"}
![\"Apples](\"fruit.png\")
\n![\"Apples](\"fruit.webp\")
\n