🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

A simple jQuery plugin for image zooming – now with support for object-fit/object-position, powered by Velocity.js animations, complete with some pre-defined image cropping classes.

Animation CSS Plugins Popup Window Zoom

Documentation

A port of @fat's simple jQuery plugin for image zooming – now with support for object-fit/object-position, powered by Velocity.js animations, complete with some pre-defined image cropping classes.

✨ Demo ✨

Differences

  • Removes Boostrap dependency
  • Adds Velocity.js dependency
  • Supports object-fit and object-position CSS properties
  • Has some classes to get you started with cropped images

To-Dos

  • Consider porting to GSAP?
  • Cleanup codebase (in line with zoom.js latest)
  • Add optional lazy/preloading if there is a wrapping <a> tag to a high-resolution image
  • Add more robust demo
  • Synchronize Velocity.js timing with CSS animation timing
  • Clean up code to allow passing a custom selector/attribute for the targeted images

Known Issues (more todos?)

  • Causes content reflow for images without (expclitly sized) containers, including floated images
  • Doesn’t work on margin: auto centered images
  • Due to animating non-transform properties there is more layout/repainting on images that are cropped


You May Also Like