charlestati / amplify

A tiny script allowing inline image zoom

Home Page:https://charlestati.github.io/amplify/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Amplify

Demo gif

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.

Quickstart

<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

About

A tiny script allowing inline image zoom

https://charlestati.github.io/amplify/

License:Apache License 2.0


Languages

Language:JavaScript 66.5%Language:SCSS 33.5%