Плавная смена картинок при наведении курсора (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/161021.png"/>
<img class="image Down" src="https://forumupload.ru/uploads/0007/e3/f7/2/743665.png"/>
</div>
[/html]
В HTML-верх или в стиль без тегов.
Туда, где должны быть изображения:
Красное - изображение до наведения.
Синее - при наведении.
Можно размножать вместе с внешним div-блоком.
