title: CSS: transition on ease-out not working
body: <p>I would like the image effects on the main page to fade out on mouse-out as well as on mouseover.</p>
  
  <p>I have changed 
  <code>all 1s ease;</code> to: all <code>1s ease-in-out;</code> but it is still not fading out on mouse-out but it just jumps.</p>
  
  <p>Site: <a href="http://wolf-photoart.witconsult.de/" rel="nofollow">http://wolf-photoart.witconsult.de/</a></p>
  
  <p>Here is an example of my current CSS:</p>
  
  <pre><code>#mainportraits img, #mainart img, #maincomics img { max-width: 56vw; }
  #mainportraits img:hover, #mainart img:hover, #maincomics img:hover{
      -webkit-filter: grayscale(50%) contrast(1.2) blur(3px) brightness(0.8); 
      -moz-filter: grayscale(50%) contrast(1.2) blur(3px) brightness(0.8); 
      -o-filter: grayscale(50%) contrast(1.2) blur(3px) brightness(0.8); 
      -ms-filter: grayscale(50%) contrast(1.2) blur(3px) brightness(0.8); 
      filter: grayscale(50%) contrast(1.2) blur(3px) brightness(0.8); 
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
  }
  
  #mainportraits:after{
      content: 'Portraits';
      z-index: 9999;
      -webkit-opacity: 0;
      -moz-opacity: 0;
      opacity: 0;
  } 
  
  #mainportraits:hover:after{
    -webkit-opacity: 0.25;
    -moz-opacity: 0.25;
    opacity: 0.25;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;   
      }
  </code></pre>
  
  <p>What am I doing wrong? Thanks!</p>