DEMO

В HTML-верх или в стиль без тегов.

Код:
<style>
.image.UP,
.image.Down {
   border:2px solid transparent;
   margin:0;
   padding:0;
}
.image.UP{
opacity:1.0;
   display:block;
   position:absolute;z-index:100;
   transition-duration: 0.96s;
  -webkit-transition-duration: 0.96s;
  -moz-transition-duration: 0.96s;
  -o-transition-duration: 0.96s;
  -ms-transition-duration: 0.96s; /* IE9+ */
}
.image.UP:hover {
   opacity:0.00;
}
 
div.ImgWrap{
display:inline-block;
padding:0;margin:0;
background-position:center center;
background-repeat:no-repeat;
}
</style>

Туда, где должны быть изображения:

Код:
<div  class=ImgWrap>
<img class="image UP" src="[color=maroon]http://uploads.ru/i/i/n/D/inDOK.png[/color]"/>
<img class="image Down" src="[color=navy]http://uploads.ru/i/3/E/W/3EWuB.png[/color]"/>
</div>

Красное - до наведения.
Синее - после наведения.
Можно размножать вместе с внешним div-блоком:

Код:
<div  class=ImgWrap>
<img class="image UP" src="http://uploads.ru/i/i/n/D/inDOK.png"/>
<img class="image Down" src="http://uploads.ru/i/3/E/W/3EWuB.png"/>
</div>
<div  class=ImgWrap>
<img class="image UP" src="http://uploads.ru/i/i/n/D/inDOK.png"/>
<img class="image Down" src="http://uploads.ru/i/3/E/W/3EWuB.png"/>
</div>
<div  class=ImgWrap>
<img class="image UP" src="http://uploads.ru/i/i/n/D/inDOK.png"/>
<img class="image Down" src="http://uploads.ru/i/3/E/W/3EWuB.png"/>
</div>

Источник: http://forumd.ru/