This code allows you to create a grid of images that acts as a menu; when you hover over one of the images, it transforms from grayscale to full color. I typically use this layout to create a menu of a course’s modules on its front page.
This menu is fully responsive, so the number of images per row will be fewer on smaller screens.
Considerations
You’ll have 3 main considerations with this layout:
- Crop all of your images to specific dimensions: For the best result, they should be exactly 600px x 600px.
- Keep your titles short: 20-25 characters is the max for this layout; you can always include longer titles on the page to which you’re linking.
- You really need both headings. If you try to leave off one of them, the overall spacing will be really wonky.
- Add hyperlinks to the image rather than the text. Then, a student can click anywhere on a tile to open the link (so this action corresponds to the full-color hover effect). I’ve also found that it’s easier to remove/change hyperlinks on images in Canvas’s rich content editor than it is on text.
Also, be aware that images with a lot of small details won’t work as well here—a busy background is hard to see behind the text overlay.
Code
This layout works on mobile devices, so go ahead and add its code to your mobile CSS if you’d like it to work in the Canvas app. (Check out my Canvas CSS Overview to learn more about how CSS works in Canvas.)
