Pure CSS Image Hover Without Using Background Images

Question

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/

Answer 1

Use a container where you do the hover on:

http://jsfiddle.net/MNyzd/8/

.hidden {
    display: none;
}

.container:hover .visible
{
    display: none;
}

.container:hover .hidden {
    display: block;
}

See also this answer: Hide / show content via CSS:hover (or JS if need be)

Answer 2

Like this?

jsFiddle

div {
    cursor:pointer;
    overflow:hidden;
    width:300px;
}
div > img:nth-child(2), div:hover > img:nth-child(1) {
    display:none;
}
div:hover > img:nth-child(2) {
    display:block;
}

Answer 3

http://jsfiddle.net/MNyzd/4/

EDIT: The code:

#hidden {
display: none;
position: absolute; 
top: 8px;
left: 8px; 
}

#visible:hover + #hidden {
display: block;
}

#hidden, #visible {
width:300px;
height:300px;
}

<div id="visible"><img src="http://b.vimeocdn.com/ps/372/159/3721596_300.jpg"></div>
<div id="hidden"><img src="http://yuccan.com/wp-content/uploads/2013/04/cool-eez-spaced2.png"></div>