title: CSS3 fade in, pause, fade out on hover
body: <p>I have a number of divs (boxes) that when you hover over them apply a coloured overlay that fades in and fades out when the mouse leaves the div area.</p>
  
  <p>Using CSS3 alone, how do I adapt my code to do the following: On hover, fade overlay in with a fast transition then when the mouse leaves the hover area, keep the overlay visible for 1 second (i.e. pause it), then fade it out slowly.</p>
  
  <p>Here's a working JSfiddle: <a href="http://jsfiddle.net/yrzx7/" rel="nofollow">http://jsfiddle.net/yrzx7/</a></p>
  
  <p>Working CSS code:</p>
  
  <pre><code>div.box {
      width: 50%;
      height: 100%;
      float: left;
      position: relative;
  }
  
  div.box img {
      width: 100%;
      height: auto;
  }
  
  div.box .details {
  position:absolute;
  top:0;
  left:0;
  width: 100%;
  height: 100%;
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, .85);
  color: #fff;
  opacity: 0;
  
  
  /* Fade out */
  transition: opacity;
  transition-timing-function: ease-out;
  transition-duration: 250ms;
  
  -ms-transition: opacity;
  -ms-transition-timing-function: ease-out;
  -ms-transition-duration: 250ms;
  
  -moz-transition: opacity;
  -moz-transition-timing-function: ease-out;
  -moz-transition-duration: 250ms;
  
  -webkit-transition: opacity;
  -webkit-transition-timing-function: ease-out;
  -webkit-transition-duration: 250ms;
  }
  
  
  
  div.box .details:hover {
  opacity: 1;
  
  /* Fade in */
  transition: opacity;
  transition-timing-function: ease-out;
  transition-duration: 250ms;
  
  -ms-transition:opacity;
  ms-transition-timing-function: ease-out;
  ms-transition-duration: 250ms;
  
  -moz-transition:opacity;
  -moz-transition-timing-function: ease-out;
  -moz-transition-duration: 250ms;
  
  -webkit-transition: opacity;
  -webkit-transition-timing-function: ease-out;
  -webkit-transition-duration: 250ms;
  }
  </code></pre>