Show box shadow on Card on hover

p-murray · Post by **p-murray** » Mon Oct 30, 2023 1:46 am

Hi,

I have read some threads on this but, I have had no luck trying to make a box-shadow appear on hover of a card control.

Has any one else done this? Is there a simple way to have a shadow appear behind a card when a user hovers or the mouse enters?

Thanks!

Paul

Post by **Pablo** » Mon Oct 30, 2023 6:54 am

You can do this with transitions.
https://www.wysiwygwebbuilder.com/transitions.html

This effect is implemented on the the page (What's New for 2023)
https://www.wysiwygwebbuilder.com/

p-murray · Post by **p-murray** » Mon Oct 30, 2023 6:42 pm

Thanks Pablo!

Works great! Just curious though... I naturally wanted to explore more options so I changed the Timing from Linear to Ease-In-Out but it made no difference. Is this a bug or I am missing something? No big deal really as I am quite happy with the shadow appearing.

Paul

Post by **Pablo** » Mon Oct 30, 2023 6:49 pm

It is difficult so say anything meaningful about this without seeing what you have done.
But I doubt that this is a bug in WWB, because this is standard browser functionality. But you may have implemented it not correctly.

I assume you know what easing does?

p-murray · Post by **p-murray** » Mon Oct 30, 2023 8:12 pm

Sure, easing is a transition timing function that can do some nice things.

I could upload my project but, all I am doing is messing around with some effects on some card objects and trying to do something similar to what you did on the "what's new for 2023" page you mentioned. However, the box-shadow doesn't behave exactly like yours. It transitions in correctly but doesn't transition out like it yours. Is this a big deal? No, not at all. Just was curious. So, if you have a suggestion, great. If not, no worries.

I truly appreciate your help.

Best,

Paul

Post by **Pablo** » Mon Oct 30, 2023 8:44 pm

I can only help you, if I see what you have done.
If it works for me, then it can also work for you.

crispy68 · Post by **crispy68** » Mon Oct 30, 2023 8:51 pm

There should be 2 inputs for the transition. Make sure you set a transition for the default and hover state.

p-murray · Post by **p-murray** » Mon Oct 30, 2023 8:57 pm

Bingo!

That was the problem exactly. I added the (default) and now it's just like Pablo's!

Thank you both so much for your help! Now, I'm off to find more trouble.

Best to you!

Paul

www.wysiwygwebbuilder.com

Show box shadow on Card on hover

Show box shadow on Card on hover

Re: Show box shadow on Card on hover

Re: Show box shadow on Card on hover

Re: Show box shadow on Card on hover

Re: Show box shadow on Card on hover

Re: Show box shadow on Card on hover

Re: Show box shadow on Card on hover

Re: Show box shadow on Card on hover