Ранее я рассказывал как можно изменять картинки при помощи 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;
}
