Hey Karl, well at the moment, I can tell you why it is happening, and that is because each of the hover-details elements have a trigger to make the details-h4 text headings animate. When the mouse is dragged quickly from one element to another, the details-h4 animation has not completed it’s previous transistion state, so if the next hover_details containing div is having a mouse hover before the previous animation is complete, because the heading texts all have same class, the animation starts at the position the previous details-h4 text heading was at… this means, just before you mouse out of a hover-details element, the details-h4 text heading is already at the end of the animation, and does not change until you mouse out… but because all the other text headings are using the same class, and the previous animation has not finished, the starting point of the next animation is starting at the end of the initial hover animation… when you drag your mouse to a white area, you are outside of all hover areas, and the animation has a chance to complete, thus the next time you hover again to any element, the animation works ok.
wow, that gave me a headache trying to say that 
I think, what you need to do, is to either give your text headings different class names and then make a copy of the hover interactions so that each element has their own, independent interaction, if you do not want to run into this problem… I have to look at it some more, to see if this can be done without having to give different class names to elements or copy the interactions to make those independent of each other… but since they are not independent currently, the main issue is that the animations do not have time to complete, before the same class is triggered by the next animation.
One note: by giving each of those elements their own independent interactions, by assigning unique class names to each of the animated text headings, you can probably then set the initial state of the text heading within the same “gallery-hover-heading” interaction, thus removing the need for the “gallery-heading-initial” interaction, so you can just create one interaction per hover_detail element (so you would end up with 4 separate interactions). Currently you have two interactions and although it works, you could do it all with one interaction. You will still end up with 4 interactions though, if you separate these out and make the animations independent of each other…
So to summarise:
- Change each of the hover-details elements to have own class like hover-details1, hover-details2 etc
- Change each of the details-h4 elements to have own class names like details-h4a, details-h4b etc
- Add an initial state in the gallery-hover-heading, on the details-h4a (and each of the other headings) so that initial state is -50px and opacity is 0
- copy the interaction so you have 4 of these, change the names of the classes you are targeting in each interaction
- save and preview or publish and it probably will work as you intended.
Like I said, there may be some other way to do this without having to create independent interactions, but I not have time to more closely look at that at the moment. it could be that you just need to give unique class names to the headings only, then just change the target classes in each interaction you have copied to point to the correct text heading class (details-h4a, details-h4b, etc).
Cheers
