Clone target to support more cases

[francoischalifour]

This is a brand new implementation of medium-zoom without any API changes.

---

This PR adds support for zooms in overflow: hidden containers (see #19, @antoinechalifour), but also for images having a transform property before being zoomed.

Before → After

Why

• Images in overflow: hidden containers stayed cropped when zoomed.
• Images lose their initial transform properties once zoomed.

Solution

Clone the image and append it to the body so that it's not constraint to its parent or any of its previous properties. This clone needs to be at the exact same position as the original, without any transform property.

Steps

1. Clone the target
2. Position the clone with an absolute position
3. Add the clone to the DOM on show event
4. Hide the original target
5. Animate the clone
6. Animate the clone back to the original target position on hide event
7. Show the original image and remove the clone from the DOM

Notes

Performance

I originally was concerned about performance, but we can still easily reach more than 60fps.

Animation

Since we duplicate the target image, it can trigger some fancy animations. It's something we need to be aware of.

Preview

View preview

---

This PR will also make possible the implementation of #6 🎉