THIS IS A RIDICULOUSLY IMPRACTICAL method of creating a “magnifying glass” effect for a hovered image.
The small preview thumbnail is positioned behind a 51 × 51 grid of 2px × 2px divs. That’s a total of 2601 divs — hence the impracticality. Below the preview thumbnail is a single div that shows a full-sized, cropped view of the image. Each preview div has a compound class that defines the margin-left and margin-top of the full-size image.
Hovering the preview divs causes the full-size image to be positioned according to the classes assigned to the hovered div. Moving the cursor will make the full-size image seem to move around smoothly in parallel with the mouse movement.
The setup here assumes a 1000px × 1000px full-size image. For different sizes you’d have to add or remove some of the positioning classes, and add or remove divs from the preview grid. Without these adjustments you’ll either not be able to see all of the full-size image, or you’ll see a margin as you get near the edges.
This sort of thing could be accomplished much more efficiently with javascript, but I wanted to see how well it would work in a pure CSS implementation.