Responsive Zoom Grid
I recently had a website design to implement that had a grid of images on the homepage. Normally I’d use something like Masonry for that, but in this instance I needed a custom solution.
Masonry zooms the images slightly on hover. That tiny amount of zoom isn’t enough to blow out an image. But my images needed to zoom to about 120% of the original, which would have resulted in an obvious loss of quality if they were enlarged that much from their natural size. That meant they would have to start out at 120% of their intended size, then be shrunk down for the initial view to fit the grid boxes. Because of this, and because the artist specified a lateral shift as well as an enlargement, I knew they had to be backgrounds (another reason I couldn’t use Masonry).
To make my images I began with my grid size and enlarged it by 120%. I fitted my images to that larger box, as shown in the top part of the image below. The bottom image shows how the image will look when shrunk to its presentational size.
Below is the codepen for the final result. (I made half-size placeholder images for the demo and us.) View it on codepen.io in “Live” view to see the responsive behavior. I pulled out most of the customizable aspects of the layout into SCSS variables to make it as reusable as possible, since I would replace the images, change the colors, and double all the sizes for my actual project. The project in an environment where I didn’t have SCSS, but I could still use the SCSS provided by Codepen to auto-prefix and compile for me, then paste the result into my CSS file.
The finished page can be viewed live on the client’s website.