Эффект опрокидывания с использованием JQuery

Не могли бы вы помочь мне создать эффект опрокидывания с помощью jquery? Я хочу, чтобы когда кто-то наводил курсор на любой из пунктов меню, текст скользил вниз и исчезал, а изображение скользило сверху вниз в центр (например, вы могли видеть этот эффект здесь панда, поскольку вы можете видеть, как изображение скользит сверху вниз, но текст не скользит вниз, что не то, что нужно).

Я знаю, что это легко сделать с помощью вспышки, но я не хочу, чтобы мое меню отображалось во вспышке, так как это было бы плохой практикой.

Можете ли вы сказать мне, что мне нужно изменить в моем меню HTML и какие функции jquery я должен использовать.

Большое спасибо за Вашу помощь

P.S. это мой HTML-код меню, и вы можете увидеть мое меню здесь

<ul class = "nav">

<li class = "active first"><a href = "#" class = "home">Home</a></li>
<li><a href = "#" class = "news">News</a></li>
<li><a href = "#" class = "offers">Special offers</a></li>
<li><a href = "#" class = "private">Private label</a></li>
<li><a href = "#" class = "locations">Locations</a></li>
<li><a href = "#" class = "about">About us</a></li>
<li><a href = "#" class = "jobs">Jobs</a></li>
<li><a href = "#" class = "contact">Contact us</a></li>
<li><a href = "#" class = "mm">Multimedia</a></li>

</ul>

МЕНЮ: