How do rollover on transparent image?

Question

I tried many various methods, but didn't work.. What's wrong with my code? Please explain... help. My both images is transparent, with my idea on mouseover shoud fade new image. Current my code:

DEMO DEMO2

<script type='text/javascript'>
$(document).ready(function(){
$("img.a").hover(
function() {
$(this).stop().animate({"opacity": "0"}, "slow");
},
function() {
$(this).stop().animate({"opacity": "1"}, "slow");
});

});
</script>

<style>
div.fadehover
{
    position: relative;
}

img.a
{
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
}

img.b
{
    position: absolute;
    left: 0;
    top: 0;
}
</style>


        <div class="fadehover">
            <a href="informacija.php"><img src="images/informacija.png" alt="Informacija" class="a"/></a>
            <a href="informacija.php"><img src="images/informacija_hover.png" alt="Informacija" class="b"/></a>
        </div>

Answer 1

I believe to achieve your desired effect as I understand it you simply need to add a background to img.a. Fiddle

   img.a{
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
    background:#fff;
  }