Streaming live at 10am (PST)

Help with interaction


#1

Hello,

I'm trying to find the best way to do the following,

I have 3 boxes on my website with a header in, when you hover over the div boxes addition text appears below. But I would the header at the bottom of the div box (Rather in the middle), and when you hover over the the boxes the header will move up and text will come under it?

Hope that makes sense,

Here is my read only, also did I design the boxes correctly? is there a method that someone else would of used to make it more responsive?

https://preview.webflow.com/preview/flextest-3d0849-f0b9a5bc9-3e442a7837342?preview=300067cd1e2b33460a0e85d1a3eff461

Best regards,
Matt


#2

Hi @Matty,

The culprit is the absolute positioning of your elements and there are a multiple ways to remedy.

I would do this: set the positions of the text boxes and services headings to auto and reduce the bottom margin of the heading. You'll notice that this will bring the copy up. Probably the most straightforward way to get it where you want it is to adjust the top padding of the service div blocks (although there are other solutions as well).

Hope this helps!


#3

Hi @Matty, that is a good question, I think as @LauraH mentioned, there are many good ways to do this in Webflow, depending on the level of interactions you want, but if I understood correctly, you wanted to have over the panel, then have info slide up?

I was playing with this and made a video, I am not sure if this is what you are going for, but hopefully it might give some ideas:

I hope this helps!

p.s. on the Content Block styling of the H1, Text Block and Button, you can style that any way you want, I was just styling that as an example, as I was moving along to get to the interaction setup :slight_smile:


#4

Thank you, worked a treat! :champagne:


#5

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.