title: Pure CSS Image Hover Without Using Background Images
body: <p>I'm trying to make a pure CSS image change on hover / rollover without using background images.  So far I have one image and when you rollover that image, another image appears. Here is the CSS:</p>
  
  <pre><code>#hidden {
  display: none;
  }
  
  #visible:hover + #hidden {
  display: block;
  }
  </code></pre>
  
  <p>So, when you rollover the <code>#visible</code> div, the <code>#hidden</code> div appears. Here is the jsFiddle: <a href="http://jsfiddle.net/MNyzd/1/" rel="noreferrer">http://jsfiddle.net/MNyzd/1/</a></p>
  
  <p>This works great, but it is not exactly what I want to accomplish. I would like the images to swap. So when you rollover <code>#visible</code>, it should <strong>disappear</strong> instead of remaining visible. My first initial idea was to make the <code>#visible</code> div to <code>display:none</code> on hover (<code>#visible:hover display:none;</code>), but this did not work.</p>
  
  <p>So does anyone have any idea how I would successfully turn this into a traditional image hover / swap using this method? Any help would be appreciated and again, here is the jsFiddle... <a href="http://jsfiddle.net/MNyzd/1/" rel="noreferrer">http://jsfiddle.net/MNyzd/1/</a></p>