Card flip and drop down animation

[brandotmedina (Brando Torres Medina)]

Hello! I have created a “Pricing Section”, where I talk about my different tiers and show details about them. Each Tier has about 6-7 features, and so I have created Flip-able Cards that flip 180* degrees to reveal back-side text. My issue is that when you flip one of these cards, the text stays crushed in within the frame of the section (too much text; too little space), and I’d like for the section to expand downwards, creating more space for the text to show itself neatly. In essence, I want to create an animation that when one hovers over the card, it will flip, and its boundary limits will expand downwards (opening more space), whilst the other cards’ boundary limits will shrink (to accommodate for the added space from the card frame) - thus creating an experience where whenever you hover over a card it will “maximize” and allow you to read it clearly.

(i tried attaching a video but it didn’t let me - one screenshot shows the screen normally, and the other as the mouse hover the top card labeled “The Webpage”).

---

Here is my public share link: Webflow - Marketing AI

[Webbbing (Daksh Jhinjha)]

Try setting the height of the section which contains the text to auto. Then it should automatically change the height of the card based on how much text there is.

[brandotmedina (Brando Torres Medina)]

I do but it still doesn’t fit in - it seems when I force it to shrink to the original box it becomes too small, meaning I would either need to remove text, or somehow expand the frame upon flipping. (I want to expand the frame)

[addweb (AddWeb Solution)]

@brandotmedina Remove the absolute positioning and adjust the height both before and after hover. Alternatively, you can change the positioning: set it to absolute before hover and switch to relative on hover.