charlestati/amplify
A tiny script allowing inline image zoom
| repo name | charlestati/amplify |
| repo link | https://github.com/charlestati/amplify |
| homepage | https://charlestati.github.io/amplify/ |
| language | JavaScript |
| size (curr.) | 22470 kB |
| stars (curr.) | 457 |
| created | 2017-08-17 |
| license | Apache License 2.0 |
Amplify
Overview
Amplify allows users to increase the size of images.
Best used in narrow containers, between paragraphs.
It is lightweight: 29 sloc of JS and 23 sloc of SCSS resulting in 1.22kB combined.
Demo
Quickstart
- Add amplify.min.css and amplify.min.js to your page
- Add the
js-amplifyCSS class to your images
<img class="js-amplify" src="photo.jpg" alt="Photo">
Browser Support
- Chrome
- Firefox
- Safari
Probably Edge, Internet Explorer 10+ and Opera too.
Known bugs
- Sometimes the first transition is not smooth
- Adding a wrapper for image centering prevents margin collapsing with the paragraphs
Todo
- Use
transform: scale()or JavaScript for smoother transitions - Find a better naming system as
.js-*in CSS is not ideal
License
Apache 2.0
