Плавная смена картинок при наведении курсора мыши

Информация, представленная на этой странице ориентирована в первую очередь для начинающих web-мастеров.

Здравствуйте, друзья, начинающие web-мастера! Этот простой урок я подготовил для Вас. При наведении курсора мыши на изображение происходит плавная его замена на другое. При уводе курсора с картинки, снова показывается исходное изображение. Посмотрите демо-пример, может быть такой вариант Вам понравится и Вы без проблем примените его на своем сайте.

Для успешной реализации эффекта на странице сайта необходимо выполнить несколько простых шагов:

1. Подберите картинки, сделайте одинаковые размеры и загрузите на сервер сайта в папку с изображениями, например, img.

2. Этот код без изменений нужно вставить в раздел head вашего сайта, где прописываются стили, или же добавить в общий файл стилей сайта:

.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;
}

3. А этот код нужно вставить в раздел body сайта, где планируете показ изображений:

<div  class=ImgField>
<img class="image first" src="img/sk2.jpg" alt="">
<img class="image second" src="img/sk3.jpg" alt="">
</div>

          Путь к картинке при загрузке страницы и при уводе курсора мыши.

          Путь к картинке при наведении курсора мыши.

Вот и весь простенький урок. Надеюсь, всё понятно. Здоровья Вам! Не забывайте делать добро другим людям! Ваш Л.М.