title: CSS3 mouseout transition not working as expected
body: <p>I have some CSS3 hover effects to animate an image caption:</p>
  
  <pre><code>.imageDetails {
      width: 100%;
      height: 360px;
      position: absolute;
      bottom: -100px;
      opacity: 0;
      color: white;
      background-color: black;
  }
  
  .item:hover .imageDetails {
      bottom: 0;
      -webkit-transition: all 0.5s, -webkit-transform 0.5s;
      transition: all 0.5s, transform 0.5s;
      width:100%;
      height: 330px;
      opacity:1;
  }
  
  .readMoreLink {
      color:#ACACAC;
      opacity: 0; 
      text-align: center;
  }
  
  .item:hover .readMoreLink {
      -webkit-transition-duration: 2s; /* Safari */
      -webkit-transition-delay: 1s; /* Safari */
      transition-duration: 2s;
      transition-delay: 1s;
      opacity: 1;
  }
  </code></pre>
  
  <p>On <code>hover</code> it works a treat, but on mouseout is just clears. I would like it to slide out too. </p>
  
  <p>I tried to use the following, but is misbehaves. </p>
  
  <pre><code>.item:hover .imageDetails:not( :hover ){
      bottom: -100px;
      -webkit-transition: all 0.5s, -webkit-transform 0.5s;
      transition: all 0.5s, transform 0.5s;
      width:100%;
      height: 330px;
      opacity:1;
  }
  </code></pre>
  
  <p>Can I add a slide out effect with CSS or is jQuery better suited to this sort of thing? </p>