Hover Effect in Bubble

Questions
1

Hey guys - anyone know how I recreate this hover effect in bubble?

I have searched around on the forum and in Google but that returns so much noise… if anyone has any experience with this please let me know!

chrome_2022-09-16_12-25-25

Thanks :slight_smile:

1 Like
2

Under conditions for your card group, add when card group is hovered, then turn on the shadow. That should do it, I think.

1 Like
3

I just updated my card style to do this and yep it worked. The blur radius needs to be 8 or higher to get the desired effect.

1 Like
4

Ok, to recap, I’ve set a hover condition in my group card style to set the shadow with the following settings.

image
image543×634 27 KB

Now this gives you the shadow but not quite the effect. By watching closely, you’ll see the card moves up slightly as you hover. So, I defined a 4 px top margin and then created a hover condition to set the top margin to 0.
image

So now it looks like this.
hover demo

Also @stuart4, thanks for asking about this as this was on my todo list tonight so I got to figure it out and help you (hopefully!)

4 Likes
5

You are a wonderful human! @treb.gatte

The site I am migrating from uses this effect all over and I wanted to match as close as I could… I will be testing this out shortly and will update with what I come up with!

Thanks again.

1 Like
6

Tested and it works well, adding a transition on the margin (and box shadow) gets the right speed of movement but in my current design makes a light delay in the top ribbon on hover … so i gave up on that for now… and it is close enough.

thanks again @treb.gatte

chrome_2022-09-16_21-51-35

in my case removed the top margin duration… but if you didnt have ribbon in the top left would make the effect better IMO.

image

7

hi @stuart4, thanks for posting this question. I followed all the instructions about the hover effect. Whenever I hover on a card, the shadow effect occurs without issues. However, I’ve spent the good part of the last 24 hours trying to give the RG cell the top margin that I need in order to “animate” it vertically. The issue is, giving it some top margin won’t work at all. The cell doesn’t move at all. Tried to play around with containers’ sized and width unsuccessfully. However, I noticed that if i put the cell outside of the RG container, margin works. Do you have any idea why this happens? P.S. I grouped all of the cells’ items inside a group, in order to style it properly. Thanks in advance.

8

hey @antoniotonydatw , here are my settings for this effect.

chrome_otMpZYHccy

[uploading, please wait if you check this in the next few mins of posting]

1 Like
9

Not sure if my video was clear? Let me know

10

Hi @stuart4, thanks for replying! Turns out, I had to change the container type from Fixed to Align to Parent! Nevertheless, thank you for taking the time to make a video about it, I really appreciate it :slight_smile: Thanks again, best

1 Like
11

No problem at all, glad you worked it out!