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.