Animations: Make a div (from a data binding template) fade away after a set number of seconds?

Question

Hi,

I have a structure like this in one of my pages:

<div class="itemtemplate" data-win-control="WinJS.Binding.Template">
  <img class="item-image" src="#" data-win-bind="src: image; alt: title" />
  <div class="item-overlay">
    <h6 class="item-count" data-win-bind="textContent: count"></h6>                
    <h3 class="item-title" data-win-bind="textContent: caption"></h3>                
    <h6 class="item-copyright" data-win-bind="textContent: copyright"></h6>
  </div>
</div>

The CSS defines a grid and makes the div with class "item-overlay" float transparently on the bottom edge of the image (a caption).

Without prior knowledge about how to actually go looking for this: can I have the entire div with class item-overlay fade out completely after a set number of seconds? And one step further, can I make it fade in again by binding a mouse-over listener to it?

Help is appreciated nudging me into the right direction.

Thanks,

Tobias