title: Css hover delay (filter)
body: <p>i use a greyscale filter for an image on my page and a very saturated filter for hover.</p>
  
  <p>When the image is hovered, i want the img to have a delay of 2-3sec untill it gets saturated.</p>
  
  <p>My codes are:</p>
  
  <pre><code>.image2{
      max-width:70%;
      border-radius: 5px;
  
      filter: grayscale(1);
      -webkit-filter: grayscale(1);
      -moz-filter: grayscale(1);
      -o-filter: grayscale(1);
      -ms-filter: grayscale(1);
  }
  .image2:hover{
      filter: saturate(500%),2s;
      -webkit-filter: saturate(500%);
      -moz-filter: saturate(500%);
      -o-filter: saturate(500%);
      -ms-filter: saturate(500%);
  }
  </code></pre>
  
  <p>I tried playing with the <code>transition-delay</code> and several others but none worked.</p>
  
  <p>Thanks for answering :)</p>