Рассмотрим плавную смену картинок при помощи CSS и HTML.
Данный метод работает на:
- Internet Explorer - 10+
- Chrome - 26.0+
- Opera - 12.10+
- Safari - 3.0+
- Firefox - 16.0+
- Android - 2+
- iOS - 2.1+
CSS
.image.first,.image.second { border:2px solid transparent; margin:0; padding:0; } .image.first { opacity:1px; 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; } .image.first:hover { opacity:0.00; } div.ImgField { display:inline-block; background-position:center center; background-repeat:no-repeat; margin:0; padding:0; }
html
А это туда где желаете видеть картинки
<div class=ImgField> <img class="image first" src="ссылка на картинку 1"/> <img class="image second" src="ссылка на картинку 2"/> </div> <div class=ImgField> <img class="image first" src="ссылка на картинку 1"/> <img class="image second" src="ссылка на картинку 2"/> </div>
Где:
- ссылка на картинку 1 - видимая картинка
- ссылка на картинку 2 - картинка появляющаяся при наведении курсора
Живой пример
Код:
<div class=ImgField> <img class="image first" src="/images/articles/77/2.png"/> <img class="image second" src="/images/articles/77/12.png"/> </div>
Результат: