CSS Product Magnification — without JavaScript

I have a thing for plush cowboy boots

I swear I don’t have an issue with JavaScript, but sometimes I find it fun to try and replicate its use just using CSS.

This week I was working on an e-commerce website when I thought to myself, I wonder if I could swap out the bog standard JavaScript product magnification and do it with just CSS.

The idea I had was this…

• Use a div container, with a set height and width
• Use an image positioned absolutely to the container div
• Use several divs to build up a grid system inside the container, which when hovered over, effect the zoom and location of the absolute image.

I’m fairly happy with the result, I wish it could be a little smoother, your feedback would be appreciated.

Update ( 30th Nov 2015 ) — Dan Cortes has taken this idea, and took it a step further, please see his blog post here.