Well, i see these types of galleries all of the time in various css templates, so combined with FCC and w3schools knowledge i decided to make one myself. Imagine a unequal grid with cell of unequal sizes. When you hover cursor over a image, that image get zoomed in. But there’s a catch, image don’t protrude i.e don’t cross boundaries of cells just like on those fancy templates 
It uses pure css, no js, jquery or css prepocessing.
Sly zoom on hover V2.0
Well the only thing that cross my mind right now is to add padding to all divs except grid-container by using :not selector applied to grid-container. Or removing overflow: hidden … Can you elaborate how this suppose to look? Don’t need code, i’ll figure this out myself, just in words how user interacts with this functionality.
With pure css? Maybe i can whip out some js … But it won’t be anymore pure css.
Check this out. I just discovered this jquery gem. It doesn’t work as you advised but it is still producing “cool” effect for the masses. Try dragging images.
I’m sort of implemented “unzooming”. When you click once, it unzooms, twice zooms again and so on, or if you move cursor out of element you can zoom again if you hover above it… Going to investigate further that draggable function but tommorow. I’m off to sleep.