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;
  }

```
It seems to me you are doing the wrong thing. The img.b should have opacity 0 at :not(:hover) and opacity 1 at :hover, but all you are doing is setting the opacity of $(this) which is img.a

Here is my re-work... I didn't use hover because I get confused with the syntax

Here is my [fiddle/jsbin](http://jsbin.com/nipocete/14/edit)

**HTML**

```
<div class="fadehover">
    <a href="#">
        <img src="http://csrelax.lt/images/informacija.png" alt="Informacija" class="a"/>
    </a>
    <a href="#">
        <img src="http://csrelax.lt/images/informacija_hover.png" alt="Informacija" class="b"/>
    </a>
</div>

```

**CSS**

```
div.fadehover
{
    position: relative;
}

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

img.b
{
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
}

```

**JS - using jQuery**

```
$(document).on('mouseenter', 'img.a', function() {
  console.log('mouseenter');
  $(this).parent().next().find('.b').animate({"opacity": "1"}, "slow");
});

$(document).on('mouseleave', 'img.a', function() {
  console.log('mouseleave');
  $(this).parent().next().find('.b').animate({"opacity": "0"}, "slow");
});

```

PS **ExceptionLimeCat** has found a very nice solution +1