Responsive grid that enlarges images

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.

The grids were based on 356px squares. Some images were square, some were rectangular, taking up two squares horizontally, and one was vertical, two squares tall. I chose not to use Masonry because I had a finite number of images (7), the placement had to be exactly as specified by the designer, I didn’t want to introduce so much overhead in JavaScript for such a small layout, and because with so few elements to control I could handle placement manually with CSS. In addition, CSS is much more efficient at calculating redraws for simple animations than JS is.

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.) 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 is in an environment where I didn’t have SCSS, but it was easy to paste the compiled SCSS provided by Codepen into my project CSS file.

 

See the Pen Gridded home page layout by Connie Finkelman (@pixelslave) on CodePen.21122

 

The finished page can be viewed live on the client’s website.

No Comments

Post a Comment