How can I show another image on hover?

Issue

Im trying to overlay another image over an image whenever someone toggles the hover state.

How can I show the second image?

<a href="#"> <img src="my-image-url" /> </a>

Solution

DEMO: http://jsfiddle.net/pDeKy/1/

HTML

<a href="#">
    <img src="http://placekitten.com/200" />
    <img src="http://placekitten.com/100" class="hovery" />
</a>

CSS

a {
    position: relative;
}
/* Make our images sit on top of one and other  */
 a img {
    position: absolute;
}
.hovery {
    display: none;
}
a:hover .hovery {
    display: block;
}

Answered By - gvee