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](http://jsbin.com/nipocete/1)
[DEMO2](http://jsbin.com/nipocete/1/edit)

```
<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>

```
['https://Stackoverflow.com/questions/23298393', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/3573697/']
I believe to achieve your desired effect as I understand it you simply need to add a background to `img.a`. [Fiddle](http://jsfiddle.net/G8TB5/2/ "Fiddle")

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

```
ExceptionLimeCat solutions good but only for in bright/shiny/white backgrounds.
Jaka Dirnbek way is better, because is more optimal.

Anyway.. Solved with this thing. But how this [Jaka Dirnbek](http://jsbin.com/nipocete/14/edit) jquery use on link? Example:

```
<div id="nav_virsus">
    <ul>
        <li><a href="#"><img src="images/pagrindinis.png" alt="Main" /></a></li>
        <li><a href="#"><img src="images/forumas.png" alt="Forumas" /></a></li>
        <li><a href="#"><img src="images/unban.png" alt="Atsibaninti" /></a></li>
        <li><a href="#"><img src="images/banai.png" alt="Banai" /></a></li>
    </ul>
</div>

```

CSS:

```
#nav_virsus {
    position:absolute;
    top:71px;
    right:50px;
}

#nav_virsus li
{
    font-family: 'Anaheim', sans-serif;
    font-size:14px;
    text-transform:uppercase;
    float:left;
    padding:20px;
}

#nav_virsus li a 
{
    color:#b8d9ff;
    text-decoration:none;
    padding:20px 5px 20px 5px;
}

#nav_virsus li a:hover
{
    background:url(../images/hover.png) repeat-x;
    color:#000;
    text-decoration:none;
    padding:21px 5px 20px 5px;
}

```