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)
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!