Hover Columns

The Challenge

Is it possible to create columns that change color when you hover over them?

The Recipe

Some basic css can accomplish almost everything you need. Ideally, you would use flexbox to move the category above the header instead of physically placing it there to improve accessibility, but that is coming soon.

1. Create a column
2. Add hover-column to the css class field
3. Add you content
   1. Category – text element with category class assigned
   2. Title (I used h3, but you need to use the appropriate heading level)
   3. Text
   4. Icon aligned right
4. In the page level custom CSS add the following (you will need to edit slightly if you choose a different heading level)

Check out the full solution*

*Due to my ongoing transition to Gutenberg for posts, the content gas moved to a page where all Avada functionality is used.