Thrive Architect's default hover state effects are nice, but what it really lacks is the ability to show one set of content, then hover and show another set of content. To accomplish this, we have to slip in a little bit of CSS and use the HTML Attribute options.

In this tutorial we'll take a look at how to show content, then hide it an show new content when you hover your mouse over a column or content box. 

The process is fairly simple. 

Step 1: Create Columns with Image Backgrounds

We're going to use columns with background style images set to 'cover' because this gives us the infinite stretch column effect we want. 

Step 2: Add a Content Box inside the Column with Content

This content is going to be the hidden content that won't be revealed until we hover. We're using a Content Box element because it will allow us to group all of the content (text, buttons, etc) inside one group and hide it all together.

Step 3: Add the Default, non-hover content inside the same content box but leave it at the bottom

Once you add the original, default non-hover content into the content box, leave it there for now. This won't be its final place, but we're going to leave it here so that we can access it easily in the future.

Step 4: Add the following CSS to the page Settings (gear icon on the right)

.reveal .thrv_wrapper {
opacity: 0;
}

.reveal:hover .thrv_wrapper {
transition: opacity 0.1s;
opacity: 1;
}

.reveal .location {
opacity: 1;
}

.reveal:hover .location {
transition: opacity 0.1s;
opacity: 0;
}

Step 5: Assign CSS (HTML Attribute) Classes to Elements

Our 'Hidden until Hover' content box needs to be given the class "reveal". Enter just the word ' reveal ' (no quotes, periods, etc) into the Class space under HTML Atrributes (left column, button when you have the content box selection).

The front, default and non-hidden (until you hover) content should be given the Class: ' location ' the same way you gave the previous class to the content box.

Step 6: Move the Content that isn't hidden until hover to where you want it

In my tutorial video, this content needs to be placed in the center area of the box or close to it. Select the text, go to Layout and Position (left side bar), then to Advanced > Relative > Then adjust the Vertical Positioning until you have it where you want it.

You now have beautiful columns that reveal hidden content when hovered over! 

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}

Join Convology Pro

Convology Pro is our private community for entrepreneurs focused on growing their businesses online with digital tools and ever-growing tech stacks.

__CONFIG_colors_palette__{"active_palette":0,"config":{"colors":{"62516":{"name":"Main Accent","parent":-1}},"gradients":[]},"palettes":[{"name":"Default Palette","value":{"colors":{"62516":{"val":"var(--tcb-color-0)","hsl":{"h":215,"s":0.46,"l":0.01}}},"gradients":[]}}]}__CONFIG_colors_palette__
Learn more about Convology Pro
>