I've been searching the web for this and can't find an answer other than using JS to do this:

I have a <div> image on a web page, and every time I hover over that image, I want another image to appear under it. When I try this with CSS I get flickering and the original image moves down with it.

Any help would be appreciated!

<style type="text/css">
}
#showPic
{
position:absolute;
z-index:1;
}
#showPic:hover
{
margin-top:100px;
display: block;
width: 200px;
height: 200px;
background-image: url(IMAGE URL);
background-repeat: no-repeat;
background-position:absolute;
visibility:visible;
{
</style>
<div id="showPic">
<img src="IMAGE URL">
</div>