title: Image Hover in Reverse using CSS
body: <p>I have a css image hover effect, in which the image in the div turns to 0 opacity and then the background image is displayed. This means as your hover, one image fades out and the other appears. </p>
  
  <p>This effect uses CSS and webkit.</p>
  
  <p>But the issue is that when you hover over the image the effect takes place but not in reverse, meaning it does not fade in when you leave the image. But that is the effect I want.</p>
  
  <p>This is the HTML markup...</p>
  
  <pre><code>&lt;div id="info"&gt;&lt;img src="infow1.png" width="800" height="800" /&gt;&lt;/div&gt;
  </code></pre>
  
  <p>This is the CSS markup...</p>
  
  <pre><code>#info   {
  background: url(infow2.png) 0 0 no-repeat; 
  position: fixed; 
  top: 50%; 
  left: 50%; 
  margin-top: -400px;
  margin-left: -400px;
  width: 800px; 
  height: 800px;
  z-index:100;
  opacity: 1;
  -webkit-transition: opacity;
  -webkit-transition-timing-function: ease-out;
  -webkit-transition-duration: 500ms;
  }
  #info img:hover{
  opacity:0;
  -webkit-transition: opacity;
  -webkit-transition-timing-function: ease-out;
  -webkit-transition-duration: 500ms;
  }
  </code></pre>
  
  <p>So overall I want the infow.png to fade out, when hover over the image then fade back in when you leave.</p>