Project Development: Masonry Image Grid

A common web design trend to showcase imagery in a contemporary format is to incorporate a masonry style image grid such as those seen on websites such as Pinterest. In turn, for the implementation of the London city highlights section I decided to develop a similar style image grid that collated the highlights of London that can then be selected whereby a pop-up display provides further information about each attraction.

In order to achieve the foundation image grid behaviour, I made use of a CSS library known as Masonry. This library enables the creation and customisation of image grids that are also completely responsive and compatible across all browsers. The images are re-positioned to an optimal position based on available vertical space as the user alternates screen size.

After adding some custom responsive rules and styles to the masonry grid I then developed further functionality that enabled each image to be hovered and selected by the user for further access to additional imagery and information.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s