title: CSS: transition opacity on mouse-out?
body: <pre><code>.item:hover {
          zoom: 1;
          filter: alpha(opacity=50);
          opacity: 0.5;
          -webkit-transition: opacity .15s ease-in-out;
          -moz-transition: opacity .15s ease-in-out;
          -ms-transition: opacity .15s ease-in-out;
          -o-transition: opacity .15s ease-in-out;
          transition: opacity .15s ease-in-out;
      }
  </code></pre>
  <p>Why does this only animate the opacity when I hover-in but not when I leave the object with the mouse?</p>
  <p>Demo here: <a href="https://jsfiddle.net/7uR8z/" rel="nofollow noreferrer">https://jsfiddle.net/7uR8z/</a></p>
  <p>​</p>