Design Notes:

1. Take a single photo and size it to fit as one or two columns in the mobile variant. In this example the mobile variant is 540px wide and a single photo is 250px wide, which allows for a desktop transition from 4 columns to 2 columns in the mobile format, without the need to resize the photos. 2. Place a single photo on the desktop, give it a name (in this example htmlclass=”mask” ) - do use a text editor for any code. Add a temporary link: “javascript: ;” 3. If you have access to smart duplicate or by copy and paste otherwise, build the photo grid for the desktop, share all photos, select the mobile variant and reorder the layout into two columns (or one should you chose). 4. Place the following code into the Website HTML (Head): UPDATED <style> .mask { filter: none transition: 0.5s ease-in-out; } .mask:hover { filter: grayscale(20%) opacity(50%); } </style> 5. You can use various filters and other style attributes, but this is a simple example. 6. With a touch device the hover effect behaves differently: where a photo has an actual link, touching that photo opens the link immediately, as opposed to showing the hovered image. Where a user touches the back icon thereafter, it returns the hovered image; this can be used to good effect as a reminder /summary of what has been viewed. 7. Using the template: just drag and drop images from the Bitmap Gallery; add and delete photo templates as required. Other hover ideas tested over time with additional reveal examples