Pure CSS image swap - css

Question

I have two images which both need to be in the HTML (so no background image), and on hover of one, it swaps for the other.
I thought I had the code working but it seems to be glitchy. I can't work out the issue.
JSFiddle here: http://jsfiddle.net/5tCju/
Here is my CSS:
#wrapper img.on,
#wrapper.gridWrap img.on {
display:none;
}
#wrapper img.default:hover img.on,
#wrapper img.default:hover img.on {
display:inline;
}
#wrapperimg.default:hover,
#wrapper img.default:hover {
display:none;
}
Any way this can be done by swapping the images between display:block; and display:inline; ?

Answer 1

To get this to work, you need to set the :hover pseudo-class to the parent container (.wrapper) instead of the images.
jsFiddle Demo
#wrapper
{
display: inline-block;
}
#wrapper:hover img.default,
#wrapper img.on
{
display:none;
}
#wrapper:hover img.on,
#wrapper img.default
{
display:inline-block;
}

Answer 2

Here is the Pure CSS Solution.
WORKING DEMO
The HTML:
<div class="images"> </div>
The CSS:
.images{background: url(http://icons.iconarchive.com/icons/icojoy/maneki-neko/256/cat-2-icon.png) no-repeat 0 0; height:300px; width:300px;}
.images:hover{background: url(https://si0.twimg.com/profile_images/2940708431/842924fb3e2cc1f7fddf1b195c3f6c81.jpeg) no-repeat 0 0; height:300px; width:300px; cursor:pointer;}
I hope this is what you are looking for.

Answer 3

Playing with the display property forces the browser to re-create the page flow, thus the flickering. A usual solution is to avoid the <img> tag and play with background-image but, if you want to use your current markup, you can simply place one image above the other:
#wrapper{
position: relative;
}
#wrapper img{
position: absolute;
}
... and the hide/display the second one:
#wrapper img.on{
opacity: 0;
}
#wrapper img.on:hover{
opacity: 1;
}
(Updated fiddle)
display would probably work better but I haven't tried it.

Answer 4

#wrapper img.on{
display:none;
}
#wrapper:hover img.default{
display:none;
}
#wrapper:hover img.on{
display:block;
}
UPDATED FIDDLE
your mistake was your were not using :hover properly. .on is not a child of .default thats why the statement #wrapper img.default:hover img.on was not working..as .on and .default both are child of #wrapper thats why you should use :hover for your wrapper in order to change images

Answer 5

Simple CSS Solution:
#wrapper img { position: absolute; float: left; }
#wrapper .on { display: none; }
#wrapper:hover .on { display: block; }
http://jsfiddle.net/5tCju/3/
Reversed version:
#wrapper img { position: absolute; float: left; }
#wrapper:hover .on { display: none; }
http://jsfiddle.net/5tCju/4/