How to create the following interaction?

Hey everyone! I’m currently stumped trying to solve an animation attempt in my Webflow project. Essentially, I have a container that holds a title along with a description. I want to hide the description until the block is hovered, which when hovered will reveal the description text. I’ve nested the div holding my title and description texts within a parent container with overflow set to hidden. Then initially I created an interaction that would hide the description using a percentage value, and would reveal the full height of the text div on hover. The only problem is that since the descriptions are different lengths and therefore, different lengths… it results in the title text being cut off. I haven’t found a way for this method to work…

Does anyone have a solution to reveal the description text on hover of the parent container in a fashion that will move the title up as well so that the description fits in the position as pictured in the screenshot?

Let me know if that’s not clear and I can recreate the interaction in my project so you can see how it’s not currently working. Any help is greatly appreciated!

Goal: Block is hovered. Title moves up and description is revealed.


Read only: https://preview.webflow.com/preview/sonder-media?utm_medium=preview_link&utm_source=designer&utm_content=sonder-media&preview=aa6783a1f976c033fa53202a9b90acd3&pageId=63a4817490ecae3f81c84e00&workflow=preview

Hi @Hunter_Reynolds

It’s just one item to adjust. But make sure the hover out is affect items with this class. The child and sibling won’t work because it’s too far down the list to be a child. Here ya go:

1 Like

Hey Gary!

Firstly, thanks so much for taking the time to investigate the issue and record a response! I initially tried the same method instructed in the video myself, but ran the same issue(or rather, limitation) as you did, which is that you were required to set a height value to the ‘couples-banner_couples-bio’ box. My concern with this method was that since each bio will be different in length, some may be 2 lines, 1 line, while others may be 3 lines, etc… the shorter bio blocks will have a large gap to compensate for the items that have larger bios. You can see in the screenshot the result.

Larger bio example.

Shorter bio example. Results in large gap as a result of minimum height set.

And yes, I know this could work. But I was trying to come up with a solution lets the bio length to be variable and have the title text slide up proportionately, that way there will never be a large gap of space. Any thoughts on that? Thanks again for your efforts!

Gotcha. The way it’s set up now won’t work. I’ll check it out when I get back. But definitely the button and icons need to be in the same div. The icons will need to be one, then the button will stay on the right. Holler at me after Christmas and I’ll do another video after testing what you’re wanting. :slight_smile:

1 Like

Do you think placing the button inside the icons/title container would fix the interaction? Thanks and happy holidays!

If you want the to only show the description text as the interaction, yes, because it will pin those to the bottom of the div. You only want the middle section to show. This way, the name title above it will slide up and down and the text can be different sizes then. Top titles will be pushed to the top.