Custom css grid image gallery

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 :slight_smile: It uses pure css, no js, jquery or css prepocessing.
Sly zoom on hover V2.0

Very nice. What would be really cool is if you could use the mouse when hovered over the image to see the parts of the images that get cropped off in each cell. For example, the girls face gets cropped off at the top when I zoom in and it would be nice if I could have a way of moving to the top of the zoomed image to see the full face zoomed in.

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.

Imagine hovering over the top right image of the girl. Currently it zooms over the center of the image shown. If I could click on the image and drag my mouse down and to the right, it would show the full face of the girl in the zoomed view. Think of it as dragging the part you can not see down into the cell portion that is viewable.

With pure css? Maybe i can whip out some js … But it won’t be anymore pure css.

Yes, you are probably right. :slight_smile:

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.