Как изменить картинку при наведении на неё курсора

Ранее я рассказывал как можно изменять картинки при помощи JavaScript

Самый простой способ радикально изменить изображение при наведении на него курсора это разместить две картинки в один контейнер и спрятать их одну под другой с помощью css правила position: absolute:

<div class="animate2">

    <img class="first" src="img/1.jpg" />

    <img class="second" src="img/2.jpg" />

</div>

Добавляем css

.animate2{

  position:relative;

  margin:0 auto;/* устанваливаем блок div по центру страницы*/

  width:480px; /* Ширина */

  height: 360px;  /* Высота */                

}

.animate2 img {

  position:absolute; /* абсолютное позиционирование*/

  left: 0; /* выравниваем картинки по левому верхнему углу div-а*/

  top: 0; /* выравниваем картинки по левому верхнему углу div-а */  

}

После добавления правил css, картинки будут размещены друг под другом. Теперь управляя прозрачностью картинок с помощью свойства opacity в обычном состоянии будем показывать вторую картинку, а при наведении курсора первую. Для этого в обычном состоянии делаем картинку с классом first полностью прозрачной, а при наведении курсора наоборот: картинка с классом second будет полностью прозрачной, а с классом first не прозрачной:

.animate2 img.first { /* первая картинка полностью прозрачная */

  opacity:0;

  filter:alpha (opacity=0);

}

.animate2:hover img.first { /* при наведении курсора первая картинка становится не прозрачной */

  opacity:1;

  filter:alpha (opacity=100);

}

.animate2:hover img.second, .animate2 img.second:hover { /* а вторая при наведении курсора становится прозрачной */

  opacity:0;

  filter:alpha (opacity=0);

}

Можно добиться плавности перехода добавив к последнему правилу свойство CSS transition:

.animate2:hover img.second, .animate2 img.second:hover {
  opacity:0;
  filter:alpha (opacity=0);
  -moz-transition: all 2s ease;
  -webkit-transition: all 2s ease;
  -o-transition: all 2s ease;
  transition: all 2s ease;
}

ИЛИ

.animate2:hover img.second, .animate2 img.second:hover { /* а вторая при наведении курсора становится прозрачной */

  opacity:0;

  filter:alpha (opacity=0);
     -moz-transition: all 1s ease-in-out; /* эффект перехода для Firefox до версии 16.0 */

    -webkit-transition: all 1s ease-in-out; /* эффект перехода для Chrome до версии 26.0, Safari, Android и iOS */

    -o-transition: all 1s ease-in-out; /* эффект перехода для Opera до версии 12.10 */

transition: all 1s ease-in-out; 
}

Источник

От себя добавлю, что вы также можете сделать плавным переход и после отведения курсора с картинки. Для этого нам нужно добавить следующий код:

.animate2:not(:hover) img.first {
  opacity: 0;
  filter: alpha (opacity=0);
  -moz-transition: all 3s ease;
  -webkit-transition:all 3s ease;
  -o-transition: all 3s ease;
  transition: all 3s ease;
}
.animate2:not(:hover) img.second, .animate img.second:not(:hover) {
  opacity: 1;
  filter:alpha (opacity=100);
  -moz-transition: all 3s ease;
  -webkit-transition: all 3s ease;
  -o-transition: all 3s ease;
  transition: all 3s ease;
}