Плавная смена картинок при наведении (CSS3)

Демо

[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="https://forumupload.ru/uploads/0007/e3/f7/2/695044.png"/>
<img class="image Down" src="https://forumupload.ru/uploads/0007/e3/f7/2/761327.png"/>
</div>
[/html]
В HTML-верх или в стиль без тегов.

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

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

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

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

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.