Erweiterbare Div mit Übergang in CSS

Ich habe oben auf meiner Seite ein div , das einen Kopftext enthält, der bei mouseenter (in der Höhe) erweitert werden sollte, um etwas kleineren Text zu enthüllen. Dann, bei mouseleave , sollte es sich dann zurückziehen. Das ist härter als es klingt ...

Die Lösung muss:

1. Gehen Sie von einer Höhe, um nur die Kopfzeile anzupassen, auf eine Höhe, die dem gesamten Text entspricht.
2. Übergang von einem zum anderen.
3. Versuchen Sie, reines CSS zu verwenden.
4. Lassen Sie die expandierende Animation anhalten, wenn die Maus verlässt, und umgekehrt (Standard in CSS, aber nicht in jQuery).

Ich habe es versucht:

1. Verwenden Sie :hover in meinem Stylesheet, um von einem festgelegten Pixelwert in auto zu wechseln, wie in diese Frage (aber in meiner ist es reines CSS). Das hat nicht geändert.
2. Verwenden einer festgelegten Höhe bei der Erweiterung, die bei verschiedenen Darstellungsfeldgrößen nicht funktioniert.
3. Verwenden von max-height und Erweitern auf etwas, das größer ist als das tatsächlich erweiterte div , wie in diese Frage . Dies bedeutet, dass die Übergänge nicht richtig funktionieren und auf verschiedenen Geräten unterschiedlich aussehen.
4. Verwenden Sie jQuery .animate() und verwenden Sie den Pixelwert von auto, um dann einen Übergang zu erstellen, wie in diese Frage , aber die Animation muss beendet werden, bevor mit dem nächsten begonnen wird, was bedeutet Eine Reihe von Animationen könnte lange nach der Maus des Benutzers weiterlaufen, wenn sie weit von der div entfernt ist.

Siehe alle vier obigen Beispiele hier .

Wie gesagt, reines CSS wäre ideal, aber wenn es nicht möglich ist, würde ich gut mit JavaScript umgehen (und ich bevorzuge jQuery).

Danke! :)