Simpel Fade out should first start on MouseOver

Design help Animations & Interactions
1

Hi

I am building a showcase site with different small gif-animations, but I dont want them all to play all at once.

So I have put the gif-animations as a background-image and the put a still image on top. And like to hide the still-image on MouseOver so you see the animation and then show the still-image again on MouseOut

It is working if I only choose the “interaction” On mouseOver, but as soon as I also choose the second action On MouseOut, the Still image is not showing when the site loads…
Take a look here at the 3 first images (logos), which have the interactions attached.

So I like to know how to have the stillimages showing from the start, so you dont see the animation before mouseOver… And I you have other suggestions to do this, you are welcome

tjeck out

Thanks
Kim

Here is my public share link:
https://preview.webflow.com/preview/showoffmedia?utm_medium=preview_link&utm_source=designer&utm_content=showoffmedia&preview=e66d10ffab9b0fed8acc866756edbae2&pageId=662a207bedeb0353abaeb84d&workflow=preview

2

Hello @KimHougaard,

Instead of using fade-out and in you can simply use custom animation

Change the opacity on hover to 0% and on hover out to 100%

image
image1920×884 151 KB

1 Like
3

Thats working… eventhough it might seem a little complex :-)
thank you

1 Like