Pure CSS Image Hover Without Using Background Images

Pure CSS Image Hover Without Using Background Images

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:
#hidden {
display: none;
}
#visible:hover + #hidden {
display: block;
}
So, when you rollover the #visible div, the #hidden div appears. Here is
the jsFiddle: http://jsfiddle.net/MNyzd/1/
This works great, but it is not exactly what I want to accomplish. I would
like the images to swap. So when you rollover #visible, it should
disappear instead of remaining visible. My first initial idea was to make
the #visible div to display:none on hover (#visible:hover display:none;),
but this did not work.
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...
http://jsfiddle.net/MNyzd/1/