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

  • 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>

    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.



    Tuesday, December 10, 2013 1:57 AM


  • Hi,

    You should be able to achieve your scenario by using CSS transitions on opacity, for example, and leveraging the :hover pseudo-class.

    Thursday, December 12, 2013 1:31 AM