Possibly Outdated Content

This content was written a while ago and may no longer be accurate, but remains here for reference purposes.

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.

Originally published on June 17, 2020

Flag Cards

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

RELATED ARTICLES

  • Read Moving away from builder settings

    Moving away from builder settings

    I am beginning to restructure my site to rely less and less on the Avada element settings in favor of site-wide styling.

    February 12, 2023

  • Read Adding Dynamic Data to a Toggle

    Adding Dynamic Data to a Toggle

    Adding dynamic data to a toggle in Avada is easier than you think.

    February 12, 2023

  • Read Horizontal Image Accordion

    Horizontal Image Accordion

    I just added a demo of an accordion-style image slider using nothing but Avada and some custom CSS.

    February 11, 2023

  • Read CSS Play Button + Lightbox

    I recently migrated this page over to the new site and wanted to make sure you could find it.

    October 11, 2021

  • Read Extending Beyond the Page Width

    A question was posted on the Theme Fusion forum about extending an image beyond the page width without using the full-width layout.

    April 11, 2021

  • Read Avada Challenge – CV Page

    A Facebook user asked if it would be possible to create a popular CV template using Avada.

    March 14, 2021