Hover Animation on an Image

All WYSIWYG Web Builder support issues that are not covered in the forums below.
Forum rules
IMPORTANT NOTE!!

DO YOU HAVE A QUESTION OR PROBLEM AND WANT QUICK HELP?
THEN PLEASE SHARE A "DEMO" PROJECT.



PLEASE READ THE FORUM RULES BEFORE YOU POST:
http://www.wysiwygwebbuilder.com/forum/viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/getting_started.html
WYSIWYG Web Builder FAQ
Post Reply
darkoracle
 
 
Posts: 23
Joined: Mon Apr 20, 2020 3:54 pm

Hover Animation on an Image

Post 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
User avatar
Pablo
 
Posts: 21708
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Hover Animation on an Image

Post 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
darkoracle
 
 
Posts: 23
Joined: Mon Apr 20, 2020 3:54 pm

Re: Hover Animation on an Image

Post 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
User avatar
Pablo
 
Posts: 21708
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Hover Animation on an Image

Post 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
Post Reply