Помогите с небольшим эффектом на JS. При наведении курсора..

Абсолютным позиционированием наложите одну на другую картинку и чтоб верхняя просто плавно затухала. Чего непонятного тут)

Ааа, разобрался. Но когда одна на другой картинки лежат это видно сразу... некрасиво :(

Сделайте их одинакового размера.

не, не получается, а есть альтернативный способ?

Если быть точнее, броузеров адекватных вашему CSS.

так у вас обе прозрачные ПНГшки.

<div class="out">
<div class="a"></div>
<div class="b"></div>
</div>
<style type="text/css">
.out { position: relative; width: 408px; height: 75px; }
.a { width: 408px; height: 75px; background: url('light.jpg') no-repeat center center; }
.b { width: 408px; height: 75px; background: url('dark.jpg') no-repeat center center; }
.out > .a { opacity: 1; }
.out:hover > .a { opacity: 0; }
.out > .b { opacity: 0; }
.out:hover > .b { opacity: 1; }
.out > * {
position: absolute; left: 0; top: 0;
transition: all 500ms ease-in-out;
-moz-transition: all 500ms ease-in-out;
-o-transition: all 500ms ease-in-out;
-webkit-transition: all 500ms ease-in-out;
}
</style>