fade-IN pops on first load of link/image

[rudi_holzapfel]

Hi everyone,

I am fairly new to webflow but have done a few websites before with other packages.

I am trying to make images/links fade in through a mouse-hover. There are 4 divs with full-size (bgnd-)images for four links, that fade in and out as the mouse hovers and moves away.

I am wondering why the character of the fade changes after the image has appeared once? The first time around it pops on quite quickly, after that it does what it’s meant to do and fades in and out very nicely.

Does anyone have an idea how to solve this? It would be most appreciated.

Thanks
Rudi

---

Here is my site Read-Only:
https://preview.webflow.com/preview/acla-argences?preview=5e5a9331f63f8602d1efa75ccc28df17

Here’s the published link:
http://acla-argences.webflow.io

[scottiejhaines (Scott Haines)]

Rudi, I suspect that it may be caused by your animations not having predetermined start values. And it may also be necessary for you to specify a z-index number on your image layers. Let me know if this fixes it or if you need further explanation.

Scottie

[StuM]

Yep i’d agree with @scottiejhaines - keep an eye on initial states either in the style panel or interactions panel

Interesting effect btw @rudi_holzapfel

[rudi_holzapfel]

@scottiejhaines & @StuM

That’s just it, thanks you guys! I didn’t know that you had to specify initial states for the interactions, I thought if you just set the class to their initial states from the get go, it would suffice. We live and learn.
The z-value doesn’t make a difference, but I added them just for neatness anyway. There’s nothing like tidy design and writing.

Thanks again, it works all just like a charm now.

Rudi