Hi, here are the principles of such an animation.
It's not important wether it happens in a static div or in a dynamic list item.
Inside your div or dynamic item, lay a div that you call "item container"
Give it position:relative, and design it as desired. This div represent the background, or normal state of your item.
Inside this div lay another div, name it "title div", put the title in it. Give the div position:absolute andstyle it as desired. When you're done, the whole item should look exactly like you want it to be when hovered.
Now hide the title div. Give it opacity:0 and display:none.
Select the container div and create a new interaction. Chose the onHover trigger, and "Affect another element", type in the title div name to select it as a target. Now add a first step onHover: display:box in zero ms. Then a second step opacity:100% in 200ms. Do the exact inverse onHoverOut.