title: CSS: Can I add ease transition to image color change hover effect?
body: <p>I created a simple effect that causes an image to change color on hover. Now I want to add transition-timing-function properties so the color transition fades in and out rather than an instant change, but I can't seem to get it to work. Any ideas?</p>
  
  <p>Here's the code:</p>
  
  <pre><code>div {
    position: relative;
    display: inline-block;
    -webkit-transition: all 500ms ease-out 1s;
    -moz-transition: all 500ms ease-out 1s;
    -o-transition: all 500ms ease-out 1s;
    transition: all 500ms ease-out 1s;
  }
  img {
    width: 100%;
    height: 100%;
  }
    div:hover::after {
    position: absolute;
    z-index: 1;
    background-color: Indigo;
    opacity: 0.4;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    content: '';
  </code></pre>
  
  <p>Thanks!</p>