CSS Product Magnification — without JavaScript
Michael Weaver
1056

Really cool! This inspired me to make a fork of it and make it a configurable grid setup:

I just found the center of the grid with ($n + 1) / 2 (i.e, for a 3×3 grid, the center block is 2: 3 + 1 = 4 / 2 = 2), and used that to figure out how much it should translate in each direction.

The stutter of it was caused in the easing; with a slow-accelerating easing function like `ease`, every time you hit a new grid section the acceleration would drop to 0 and you’d get a pause. It’s a little better with `ease-out`, but I couldn’t find a good solution with that one.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.