Problem showing additional image on hover

[ZICKONEZERO]

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>

[ZICKONEZERO]

Ok I figured it out. Here's the code that worked:

<style type="text/css">

#sBux .hov
{
position:absolute;
top:0px;
left:0px;
}

#sBux: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="sBux">
<img class="hov" src="IMAGE URL">
</div>