This code allows you to create a grid of images that can act 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.
I developed this header to add to the top of a Canvas course's homepage. It provides space for a quick text announcement, and it has a button that direct students to a specific spot in the course.
With this CSS, you can create more distinct titles and add an introduction section to pages in your Canvas course.
With accordions, you can include a lot of content on a page without taking up a lot of real estate. They work particularly well as FAQ lists and glossaries.
In designing my own CSS for Canvas, I ran into several limitations that I outline here for you, plus I share some recommendations for writing CSS when multiple people (some new to HTML) will be using it.
