Page 1 of 1

Hover Animation on an Image

Posted: Fri Mar 01, 2024 10:25 pm
by darkoracle
Hi

I have run into an issue I can't solve and it's probably super easy for someone who knows what to do, all I want to do is apply a filter to an image on mouse over:

Image

The only filter I can get to work is blur with:

Blur(3.5px)

but I have no idea which Value to add to get any other filter to work, is there a list somewhere I am missing?

Any help would be appreciated.
J

Re: Hover Animation on an Image

Posted: Sat Mar 02, 2024 7:22 am
by Pablo
This is a standard HTML feature, so this is not specific to WWB.

This may be helpful:
https://developer.mozilla.org/en-US/docs/Web/CSS/filter

Re: Hover Animation on an Image

Posted: Sat Mar 02, 2024 9:46 am
by darkoracle
Thank you Pablo, makes perfect sense now :D

One last question, using the following animation:

Transform Scale 1.1 and set an image overflow to hidden you get this lovely zoom animation when you mouse over it, I can't find the option to set Overflow: Hidden on a card image so when I apply the same animation the image grows out of the card, still zooms obviously but overflows into the card or content next to it. Is there a way to have the same cool effect on a card?

All the best
J

Re: Hover Animation on an Image

Posted: Sat Mar 02, 2024 11:08 am
by Pablo
There you can set the image layout property to 'box'.

This is demonstrated here:
https://www.wysiwygwebbuilder.com/support/wb15tryouts/wb15_cards.html#CardContainer22