Du hast vergessen, zwei wichtige Aspekte zu erwähnen, die ich aus der Beschreibung nur vermute:
- Es handelt sich um animierte GIFs
- Die Animation läuft nur einmal, nicht endlos
Beides korrekt
Und in diesem Fall hast du deine Zwickmühle: Die Animation läuft einmal nach dem Laden der GIFs ab, während die Bilder unsichtbar sind. Werden sie nun eingeblendet, ist die Animation längst abgelaufen und die GIFs zeigen statisch das letzte Einzelbild.
Zwei mögliche Lösungen:
a) Verzichte auf Preloading und nimm die kurze Verzögerung beim ersten Hovern in Kauf.
b) Verzichte auf den Animationseffekt.
Klingt logisch... die Verzögerung in Kauf zu nehmen ist sehr unschön, der verzicht auf den Animationseffekt ebenfalls - dann kann ich die Spielerei direkt sein lassen... :(
Übrigens:
CSS und Markup passen nicht zusammen. Du legst Eigenschaften für ein Element mit der ID "hidepics" fest, verwendest im HTML aber stattdessen eine Klasse "hidepics".
Dass mir das selber nicht aufgefallen ist... natürlich bereits korrigiert!