Popup Image Links

The modal contains a responsive image grid for the logo images. The modal has a maximum width setting. In this case there are three images per row so the max width is set to 600px to stop the images getting too big and losing quality when viewed at wide browser settings.
Images
In this example, each image was created by dropping the logo onto a white page in Keynote, taking a screenshot and cropping it to 200px x 150px using EasyCrop. It can just as easily be done by dropping the logos onto a blank page in EverWeb and using Preview to take the screenshot, crop and size the images.
The number of images per row is entered and CSS calc used to set the appropriate percentage width for each.
Links
Each image is a hyperlink to open in a new window if required.
SEO
Since there is no text for the search engines to pick up on, each image has an alt text attribute and each link has a title attribute which will show on hover when the page is viewed on a computer. If the title is not required, leave the field blank.
Modal Styles
A box shadow on hover can added to each image.
Note how the modal overlay opacity has been reduced to 50% so that the page content is partially viewable. If reduced to zero the modal close X will be invisible but the modal can be closed by clicking or tapping anywhere outside of the modal window.